`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 zB 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 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 zB 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 2

在你的这个评论之后，问题似乎是在循环tr的第一次迭代中包含thead内的tr ，此时你执行td = tr[i].getElementsByTagName("td")[0]; 它试图获取空列表的第 0 个元素（因为第一个tr有 0 个td元素），它返回undefined 。

如果你只需要在页面内一个表，你可以通过获取缩短你的代码很多tr S中的内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 zB 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>