Question

我正在使用外部wordpress插件来打印出地点列表（即轿车），我想按搜索文本字段进行过滤。该插件将输出一个表格，如下面的代码所示。

我尝试了使用tr和td过滤的示例，但没有一个起作用，我查看了https://www.w3schools.com/howto/howto_js_filter_lists.asp并试图编辑该代码以使用SPAN标记，而且搜索了很多stackoverflow。

搜索字段：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here">

脚本：

<script>
    // taken straight from w3schools
    function myFunction() {
    // Declare variables
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        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) {
                  txtValue = td.textContent || td.innerText;
                  if (txtValue.toUpperCase().indexOf(filter) > -1) {
                      tr[i].style.display = "";
                  }else {
                      tr[i].style.display = "none";
             }
          }
      }
  }
</script>

表：

<table id="exampletable" class="table1">
    <tbody>
        <tr>
            <td class="placeicon">
                <img src="icon.png">
            </td>
            <td class="placetext">
                <div class="placecontrols">
                    <a href="examplemap.html"><img src="icon2.png"></a>
                </div>
                <span class="text">
                    <strong>Example Place</strong>
                    <br>Address 123
                    <br>Phone: 123456789
                </span>
            </td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>

我希望搜索字段可以过滤名称在SPAN标记中的表。

Answer 1

花了我很多时间来解决这个问题。

首先，您的表和js的ID不同，请将其更改为exampletable。

第二步进入代码。而不是td = tr[i].getElementsByTagName("td")[0]; 尝试td = tr[i].getElementsByTagName("strong")[0];

或使用

 <script>
    // taken straight from w3schools
    function myFunction() {
    // Declare variables
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("exampletable");
        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("strong")[0];
            if (td) {
                  txtValue = td.textContent || td.innerText;
                  if (txtValue.toUpperCase().indexOf(filter) > -1) {
                      tr[i].style.display = "";
                  }else {
                      tr[i].style.display = "none";
             }
          }
      }
  }
</script>

Answer 2

尝试以下示例。您的代码有些错误： *选择表格的ID不正确 *在循环中，您需要使用<td>查找第一个tr[i].getElementsByTagName("td")[0]元素，但是要搜索的实际文本位于另一个元素中。

我还清理了一些变量，现在它使用了querySelector和querySelectorAll`，它们使您可以使用CSS样式选择器，处理起来会更容易！

function myFunction() {
  var txtValue = "";
  var filter = document.querySelector("#myInput").value.toUpperCase();
  var table = document.querySelector("#myTable");
  var tr = table.querySelectorAll("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (var i = 0; i < tr.length; i++) {
    var thisRow = tr[i];
    var textElement = thisRow.querySelector(".text");
    if (textElement) {
      txtValue = textElement.textContent || textElement.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        thisRow.style.display = "";
      } else {
        thisRow.style.display = "none";
      }
    }
  }
}

table,
td {
  border: 1px solid #333;
  padding: 3px;
  border-collapse: collapse;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here">

<table id="myTable">
  <tbody>
    <tr>
      <td class="placeicon">
        <img src="icon.png">
      </td>
      <td class="placetext">
        <div class="placecontrols">
          <a href="examplemap.html"><img src="icon2.png"></a>
        </div>
        <span class="text">
            <strong>Example Place</strong>
            <br>Address 123
            <br>Phone: 123456789
        </span>
      </td>
    </tr>
    <tr>
      <td class="placeicon">
        <img src="icon.png">
      </td>
      <td class="placetext">
        <div class="placecontrols">
          <a href="examplemap.html"><img src="icon2.png"></a>
        </div>
        <span class="text">
            <strong>Another Place</strong>
            <br>Address 456
            <br>Phone: 987654321
        </span>
      </td>
    </tr>
    <tr>
      <td class="placeicon">
        <img src="icon.png">
      </td>
      <td class="placetext">
        <div class="placecontrols">
          <a href="examplemap.html"><img src="icon2.png"></a>
        </div>
        <span class="text">
            <strong>Completely Different Place</strong>
            <br>Address 472
            <br>Phone: 1684233445
        </span>
      </td>
    </tr>
  </tbody>
</table>

如何过滤内容为div或span的HTML表？

2 个答案: