Question

我有以下脚本，该脚本根据第一列中的名称隐藏表行。它适用于单个表。

我在一行中添加了一张表格，其中包含该地点房间的其他信息。现在，如果搜索字符串不匹配，则附加表中的行也被标记为隐藏。

如何修改 mySearchFuntion ，以便仅隐藏主表 myTable 中的行？该脚本应忽略其他表。

function mySearchFunction() {
    // Declare variables
    var input, filter, table, tr, td, i;
    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) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
        }
    }
}

<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

非常感谢您的帮助。

Answer 1

如果只想获取主表的直接子级，则可以使用 children 属性。

更改以下内容：

table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

收件人

table = document.querySelector("#myTable tbody");
tr = table.children;

function mySearchFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.querySelector("#myTable tbody");
  tr = table.children;

  // Loop through all table rows, and hide those who don't match the search query
  for (let 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";
      }
    }
  }
}

<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

这行得通吗？

JS

// Hides main rows that do not have a table inside
function mySearchFunction() {
   $('#myTable > tr').has('table').css("display","block")
   $('#myTable > tr').has(':not(table)').css("display","none")
}

HTML

<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

当我寻找tr元素时，如何忽略另一个表中的表？

2 个答案: