如何过滤内容在 div 或 span 中的 HTML 表格？

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

我花了很长时间才弄清楚这一点。

首先，你的table和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 不正确 * 在循环中，您让它查找第一个带有tr[i].getElementsByTagName("td")[0] 的<td> 元素，但您要搜索的实际文本位于不同的元素中。

我还清理了一些变量，现在它使用了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>