文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >` `getElementsByTagName`‘t’返回`未定义‘

问` `getElementsByTagName`‘t’返回`未定义‘
EN

Stack Overflow用户
提问于 2020-01-15 15:37:04
回答 2查看 1.1K关注 0票数 1

你好，我是非常接近完成我的演示网站，但不知怎的，我不能让这个简单的部分工作。

当其他一切正常运行时，td为什么会返回未定义的值？

​

代码语言：javascript
复制
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";
      }
    }
  }
}
代码语言：javascript
复制
<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>

​

css
getelementsbytagname
javascript
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-15 15:51:24

您还需要迭代td元素。

​

代码语言：javascript
复制
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 = "";
            }
        }
    }
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2020-01-15 16:22:14

在this comment of yours之后，问题似乎是在循环的第一次迭代中，tr在thead中包含了tr，此时您可以做td = tr[i].getElementsByTagName("td")[0];，它尝试获取空列表的第0元素(因为第一个tr有0 td元素)，后者返回undefined。

如果页面中只有一个表，则可以通过使用tr直接在tbody中获取querySelectorAll并迭代它们来大大缩短代码。

​

代码语言：javascript
复制
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";
      }
    }
  }
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59754766

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档