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

Question

我想提供一个包含过滤器输入的表格，用户应输入任何数字，并且在表格下方应显示具有最接近查找结果的行。

可以说我想在11847之前搜索，它什么都没有显示，但是应该显示该行。

下面是一个有效的代码段以及到目前为止我的HTML和JS。 但是它只会循环到第一列。 我知道这是根据这段代码：

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

但是还没有弄清楚如何做到这一点。

 function reservationListFunction() { // Declare variables var input, filter, table, tr, td, i; input = document.getElementById("reservationListInput"); filter = input.value.toUpperCase(); table = document.getElementById("reservationTable"); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } 

 #reservationListInput { background-image: url('./assets/bootstrap/fonts/searchicon.png'); /* Add a search icon to input */ background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 100%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } #reservationTable { border-collapse: collapse; /* Collapse borders */ width: 100%; /* Full-width */ border: 1px solid #ddd; /* Add a grey border */ font-size: 18px; /* Increase font-size */ } #reservationTable th, #reservationTable td { text-align: left; /* Left-align text */ padding: 12px; /* Add padding */ } #reservationTable tr { /* Add a bottom border to all table rows */ border-bottom: 1px solid #ddd; } #reservationTable tr.header, #reservationTable tr:hover { /* Add a grey background color to the table header and on hover */ background-color: #f1f1f1; } 

 <input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation.."> <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> 

Answer 1

td = tr[i].getElementsByTagName("td")[0]; 将返回您正在遍历的tr的第一个td 。 这就是[0]部分-它引用getElementsByTagName()返回的数组的0索引。

要访问所有的td '你通过循环排在S，你需要删除[0]指标，并依次通过td的与返回td = tr[i].getElementsByTagName("td")而不是。

还从测试中排除了.header行，并且如果过滤器返回匹配项，则将中断td的循环。

 function reservationListFunction() { // Declare variables var input, filter, table, tr, td, i; input = document.getElementById("reservationListInput"); filter = input.value.toUpperCase(); table = document.getElementById("reservationTable"); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query for (i = 0; i < tr.length; i++) { if (!tr[i].classList.contains('header')) { td = tr[i].getElementsByTagName("td"), match = false; for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { match = true; break; } } if (!match) { tr[i].style.display = "none"; } else { tr[i].style.display = ""; } } } } 

 #reservationListInput { background-image: url('./assets/bootstrap/fonts/searchicon.png'); /* Add a search icon to input */ background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 100%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } #reservationTable { border-collapse: collapse; /* Collapse borders */ width: 100%; /* Full-width */ border: 1px solid #ddd; /* Add a grey border */ font-size: 18px; /* Increase font-size */ } #reservationTable th, #reservationTable td { text-align: left; /* Left-align text */ padding: 12px; /* Add padding */ } #reservationTable tr { /* Add a bottom border to all table rows */ border-bottom: 1px solid #ddd; } #reservationTable tr.header, #reservationTable tr:hover { /* Add a grey background color to the table header and on hover */ background-color: #f1f1f1; } 

 <input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation.."> <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> 

Answer 2

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>

下面是搜索代码，它遍历每一行以找到第二列。 如果您无法获得理想的结果，请告诉我。

 $("#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();
                }
            }
        });
    });