如何使用Javascript或Jquery迭代表中的每个TD和TR？

我想提供一个表，包括一个过滤器输入，用户应该输入任何数字，并在表下面，它应该显示最近的发现行

假设我想搜索11847，它没有显示任何内容，但它应该显示行

下面是一个工作片段和我的Html和JS，到目前为止我已经有了。但它只会循环通过第一列。我知道这是根据这段代码：

td = tr[i].getElementsByTagName("td")[0];

但我还没弄明白怎么做

函数reservationListFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“reservationListInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“reservationTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

#reservationListInput{
背景图片：url（'./assets/bootstrap/font/searchicon.png'）；
/*将搜索图标添加到输入*/
背景位置：10px 12px；
/*定位搜索图标*/
背景重复：无重复；
/*不要重复图标图像*/
宽度：100%；
/*全宽*/
字体大小：16px；
/*增加字体大小*/
填充：12px 20px 12px 40px；
/*添加一些填充物*/
边框：1px实心#ddd；
/*添加灰色边框*/
边缘底部：12px；
/*在输入下方添加一些空格*/
}
#预订表{
边界塌陷：塌陷；
/*塌陷边界*/
宽度：100%；
/*全宽*/
边框：1px实心#ddd；
/*添加灰色边框*/
字号：18px；
/*增加字体大小*/
}
#预订表th，
#预订表{
文本对齐：左对齐；
/*左对齐文本*/
填充：12px；
/*添加填充物*/
}
#预订表tr{
/*向所有表行添加底部边框*/
边框底部：1px实心#ddd；
}
#reservationTable tr.header，
#reservationTable tr:悬停{
/*将灰色背景色添加到表格标题并悬停*/
背景色：#f1f1；
}

名称
小屋
桌子
地位
阿尔弗雷德·福特基斯特
49222
201
预期
伯格伦兹蛇
12846
300
室内
岛屿贸易
11847
234
取消
科尼格利希·埃森
9876
253
部分的

td=tr[i].getElementsByTagName（“td”）[0]

将返回循环通过的

tr

中的第一个

td

。这就是

[0]

部分的内容-它引用了

getElementsByTagName（）

返回的数组的

0

索引

要访问正在循环的行中的所有

td

，您需要删除

[0]

索引，并循环通过

td=tr[i].getElementsByTagName（“td”）

返回的

td

还将

.header

行排除在测试之外，如果过滤器返回匹配，我将中断

td

的循环

函数reservationListFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“reservationListInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“reservationTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

#reservationListInput{
背景图片：url（'./assets/bootstrap/font/searchicon.png'）；
/*将搜索图标添加到输入*/
背景位置：10px 12px；
/*定位搜索图标*/
背景重复：无重复；
/*不要重复图标图像*/
宽度：100%；
/*全宽*/
字体大小：16px；
/*增加字体大小*/
填充：12px 20px 12px 40px；
/*添加一些填充物*/
边框：1px实心#ddd；
/*添加灰色边框*/
边缘底部：12px；
/*在输入下方添加一些空格*/
}
#预订表{
边界塌陷：塌陷；
/*塌陷边界*/
宽度：100%；
/*全宽*/
边框：1px实心#ddd；
/*添加灰色边框*/
字号：18px；
/*增加字体大小*/
}
#预订表th，
#预订表{
文本对齐：左对齐；
/*左对齐文本*/
填充：12px；
/*添加填充物*/
}
#预订表tr{
/*向所有表行添加底部边框*/
边框底部：1px实心#ddd；
}
#reservationTable tr.header，
#reservationTable tr:悬停{
/*将灰色背景色添加到表格标题并悬停*/
背景色：#f1f1；
}

名称
小屋
桌子
地位
阿尔弗雷德·福特基斯特
49222
201
预期
伯格伦兹蛇
12846
300
室内
岛屿贸易
11847
234
取消
科尼格利希·埃森
9876
253
部分的

HTML代码：

<table id="reservationTable">
  <tr class="header">
    <th style="width:40%;">Name</th>
    <th style="width:20%;">Cabin</th>
    <th style="width:20%;">Table</th>
    <th style="width:20%;">Status</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>49222</td>
    <td>201</td>
    <td>Expected</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>12846</td>
    <td>300</td>
    <td>Inhouse</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>11847</td>
    <td>234</td>
    <td>Cancelled</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>9876</td>
    <td>253</td>
    <td>Partial</td>
  </tr>
</table>
<br />
<input type="text" id="reservationListInput" placeholder="Search Reservation"></input>

---

问题是您只在第一个td中签入。这解决了我的问题。非常感谢@Chris sweet，没问题。基本上我需要遍历每一行，检查每个单元格是否存在搜索输入中的内容。因此，您需要任何输入来搜索cab或name..对..让我试试

 $("#reservationListInput").on("keyup", function() {
        var value = $(this).val();

        $("table tr").each(function(index) {
            if (index !== 0) {

                $row = $(this);

                var id = $row.find("td:nth-child(2)").text();

                if (id.indexOf(value) !== 0) {
                    $row.hide();
                }
                else {
                    $row.show();
                }
            }
        });
    });