Question

Здравствуйте, я очень близок к финалу sh мой демонстрационный сайт, но почему-то я не могу заставить этот простой кусок работать.
Почему, черт возьми, td возвращает неопределенное значение, когда все остальное работает нормально?

function find() {
  var input, filter, table, tr, td, i, txtValue;
  //input = document.getElementById("search");
  //filter = input.value.toUpperCase();
  table = document.getElementById("table");
  tr = table.getElementsByTagName("tr");
  console.log(tr, ("tr"));
  console.log(tr.length, ("trL"));
  for (i = 0; i < tr.length; i++) {
    console.log(tr[i], ("trI"));
    td = tr[i].getElementsByTagName("td")[0];
    console.log(td, ("td")); //UNDEFINED?????
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<button onclick="find()">Find</button>

<table border="1" cellspacing="0" cellpadding="5" id="table" style="width: 50%;">
  <thead>
    <tr>
      <th>Thema</th>
      <th>Typ</th>
      <th>Beschreibung</th>
      <th>Kontext</th>
      <th>SVG</th>
      <th>AI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol oben</td>
      <td>Elektronik</td>
      <td><img src="1.svg"></td>
      <td>1.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol unten</td>
      <td>Elektronik</td>
      <td><img src="2.svg"></td>
      <td>2.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt Standard</td>
      <td>Elektronik</td>
      <td><img src="3.svg"></td>
      <td>3.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog Gleichstrom</td>
      <td>Elektronik</td>
      <td><img src="4.svg"></td>
      <td>4.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="5.svg"></td>
      <td>5.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="6.svg"></td>
      <td>6.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="7.svg"></td>
      <td>7.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Auge</td>
      <td>Misc</td>
      <td><img src="8.svg"></td>
      <td>8.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bad Smile</td>
      <td>Misc</td>
      <td><img src="9.svg"></td>
      <td>9.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bidirektional</td>
      <td>Misc</td>
      <td><img src="10.svg"></td>
      <td>10.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-IO</td>
      <td>Wiesemann und Theis</td>
      <td><img src="11.svg"></td>
      <td>11.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>USB-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="12.svg"></td>
      <td>12.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>COM-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="13.svg"></td>
      <td>13.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Microwall</td>
      <td>Wiesemann und Theis</td>
      <td><img src="14.svg"></td>
      <td>14.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-Thermometer</td>
      <td>Elektronik</td>
      <td><img src="15.svg"></td>
      <td>15.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Software</td>
      <td>Browser</td>
      <td>Misc</td>
      <td><img src="16.svg"></td>
      <td>16.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User der auf eine Webseite zugreift</td>
      <td>Computer und Server</td>
      <td><img src="17.svg"></td>
      <td>17.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User</td>
      <td>Computer und Server</td>
      <td><img src="18.svg"></td>
      <td>18.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Server mit Attributionsicon für z.B PHP, SQL</td>
      <td>Computer und Server</td>
      <td><img src="19.svg"></td>
      <td>19.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Datenbank</td>
      <td>Computer und Server</td>
      <td><img src="20.svg"></td>
      <td>20.ai</td>
    </tr>
  </tbody>
</table>

Nina Scholz · Answer 1 · 15 января 2020

Вам необходимо итерировать элементы td.

function find() {
    var filter = document.getElementById("search").value.toUpperCase(),
        tr = document.getElementById("table").getElementsByTagName("tr"),
        td,
        i, j,
        txtValue;

    if (!filter) {                                                // no filter
        for (i = 1; i < tr.length; i++) tr[i].style.display = ""; // show all
        return;
    }
    
    for (i = 1; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        tr[i].style.display = "none"; // move this here for a start value
        for (j = 0; j < td.length; j++) {
            txtValue = td[j].textContent || td[j].innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            }
        }
    }
}

<input type="text" id="search"><button onclick="find()">find</button>
<table border="1" cellspacing="0" cellpadding="5" id="table" style="width: 50%;">
  <thead>
    <tr>
      <th>Thema</th>
      <th>Typ</th>
      <th>Beschreibung</th>
      <th>Kontext</th>
      <th>SVG</th>
      <th>AI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol oben</td>
      <td>Elektronik</td>
      <td><img src="1.svg"></td>
      <td>1.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol unten</td>
      <td>Elektronik</td>
      <td><img src="2.svg"></td>
      <td>2.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt Standard</td>
      <td>Elektronik</td>
      <td><img src="3.svg"></td>
      <td>3.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog Gleichstrom</td>
      <td>Elektronik</td>
      <td><img src="4.svg"></td>
      <td>4.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="5.svg"></td>
      <td>5.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="6.svg"></td>
      <td>6.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="7.svg"></td>
      <td>7.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Auge</td>
      <td>Misc</td>
      <td><img src="8.svg"></td>
      <td>8.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bad Smile</td>
      <td>Misc</td>
      <td><img src="9.svg"></td>
      <td>9.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bidirektional</td>
      <td>Misc</td>
      <td><img src="10.svg"></td>
      <td>10.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-IO</td>
      <td>Wiesemann und Theis</td>
      <td><img src="11.svg"></td>
      <td>11.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>USB-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="12.svg"></td>
      <td>12.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>COM-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="13.svg"></td>
      <td>13.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Microwall</td>
      <td>Wiesemann und Theis</td>
      <td><img src="14.svg"></td>
      <td>14.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-Thermometer</td>
      <td>Elektronik</td>
      <td><img src="15.svg"></td>
      <td>15.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Software</td>
      <td>Browser</td>
      <td>Misc</td>
      <td><img src="16.svg"></td>
      <td>16.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User der auf eine Webseite zugreift</td>
      <td>Computer und Server</td>
      <td><img src="17.svg"></td>
      <td>17.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User</td>
      <td>Computer und Server</td>
      <td><img src="18.svg"></td>
      <td>18.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Server mit Attributionsicon für z.B PHP, SQL</td>
      <td>Computer und Server</td>
      <td><img src="19.svg"></td>
      <td>19.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Datenbank</td>
      <td>Computer und Server</td>
      <td><img src="20.svg"></td>
      <td>20.ai</td>
    </tr>
  </tbody>
</table>

Federico klez Culloca · Answer 2 · 15 января 2020

После этого вашего комментария , похоже, проблема в том, что на первой итерации l oop tr содержит tr внутри thead, после чего вы делаете td = tr[i].getElementsByTagName("td")[0];, который пытается получить 0-й элемент пустого списка (поскольку первый tr имеет 0 td элементов), который возвращает undefined.

Если у вас есть только одна таблица на странице, которую вы можно значительно сократить код, получив tr внутри tbody напрямую, используя querySelectorAll и выполнив их итерацию.

function find() {
  var input, filter, table, tr, td, i, txtValue;
  //input = document.getElementById("search");
  //filter = input.value.toUpperCase();
  tr = document.querySelectorAll("table tbody tr");
  console.log(tr, ("tr"));
  console.log(tr.length, ("trL"));
  for (i = 0; i < tr.length; i++) {
    console.log(tr[i], ("trI"));
    td = tr[i].getElementsByTagName("td")[0];
    console.log(td, ("td")); //UNDEFINED?????
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<button onclick="find()">Find</button>

<table border="1" cellspacing="0" cellpadding="5" id="table" style="width: 50%;">
  <thead>
    <tr>
      <th>Thema</th>
      <th>Typ</th>
      <th>Beschreibung</th>
      <th>Kontext</th>
      <th>SVG</th>
      <th>AI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol oben</td>
      <td>Elektronik</td>
      <td><img src="1.svg"></td>
      <td>1.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt mit Gleichtrom Symbol unten</td>
      <td>Elektronik</td>
      <td><img src="2.svg"></td>
      <td>2.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>230 Volt Standard</td>
      <td>Elektronik</td>
      <td><img src="3.svg"></td>
      <td>3.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog Gleichstrom</td>
      <td>Elektronik</td>
      <td><img src="4.svg"></td>
      <td>4.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="5.svg"></td>
      <td>5.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="6.svg"></td>
      <td>6.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Analog</td>
      <td>Elektronik</td>
      <td><img src="7.svg"></td>
      <td>7.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Auge</td>
      <td>Misc</td>
      <td><img src="8.svg"></td>
      <td>8.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bad Smile</td>
      <td>Misc</td>
      <td><img src="9.svg"></td>
      <td>9.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Attribut</td>
      <td>Bidirektional</td>
      <td>Misc</td>
      <td><img src="10.svg"></td>
      <td>10.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-IO</td>
      <td>Wiesemann und Theis</td>
      <td><img src="11.svg"></td>
      <td>11.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>USB-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="12.svg"></td>
      <td>12.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>COM-Server</td>
      <td>Wiesemann und Theis</td>
      <td><img src="13.svg"></td>
      <td>13.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Microwall</td>
      <td>Wiesemann und Theis</td>
      <td><img src="14.svg"></td>
      <td>14.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Objekt</td>
      <td>Web-Thermometer</td>
      <td>Elektronik</td>
      <td><img src="15.svg"></td>
      <td>15.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Software</td>
      <td>Browser</td>
      <td>Misc</td>
      <td><img src="16.svg"></td>
      <td>16.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User der auf eine Webseite zugreift</td>
      <td>Computer und Server</td>
      <td><img src="17.svg"></td>
      <td>17.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Computer / User</td>
      <td>Computer und Server</td>
      <td><img src="18.svg"></td>
      <td>18.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Server mit Attributionsicon für z.B PHP, SQL</td>
      <td>Computer und Server</td>
      <td><img src="19.svg"></td>
      <td>19.ai</td>
    </tr>
    <tr>
      <td>Gerätewelten</td>
      <td>Hardware</td>
      <td>Datenbank</td>
      <td>Computer und Server</td>
      <td><img src="20.svg"></td>
      <td>20.ai</td>
    </tr>
  </tbody>
</table>

`getElementsByTagName` для` td` возвращает `undefined`

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

`getElementsByTagName` для` td` возвращает `undefined`

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы