Question

我想提供一个包含过滤器输入的表，用户应输入任何数字，在表格中，它应显示最接近查找的行。

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

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

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

但是我们还没弄明白如何完成这项工作。

＆＃13;

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";
      }
    }
  }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

td = tr[i].getElementsByTagName("td")[0];将返回您循环播放的td中的第一个tr。那是[0]部分的内容 - 它引用了0返回的数组的getElementsByTagName()索引。

要访问您要循环播放的行中的所有td，您需要删除[0]索引，然后循环浏览td而是以td = tr[i].getElementsByTagName("td")返回。

还排除了.header行被测试，如果过滤器返回匹配项，则会打破td的循环。

＆＃13;

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 = "";
      }
    }
  }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

HTML code：

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

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

2 个答案: