`td`的getElementsByTagName`返回`undefined`

Question

您好，我已经很接近完成我的演示站点，但是以某种方式，我无法使这个简单的部分正常工作。为什么当其他一切运行正常时，td为何返回undefined？

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>

Answer 1

您还需要迭代td元素。

function find() {
  var input, filter, table, tr, td, i, j, txtValue;

  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("table");
  tr = table.getElementsByTagName("tr");

  if (!filter) return; // exit if no filter is available
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    tr[i].style.color = '#000'; //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.color= '#f00' //display = "";
      }
    }
  }
}

<table id="table">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<input type="text" id="search"><button onclick="find()">find</button>