过滤表后重新加载nth：child

一尘不染

过滤表后重新加载nth：child

javascript

我对这一切都很陌生，需要一些帮助。我想在使用过滤器的同时开始工作“nth:child(even)”。我的 JavaScript 代码的很大一部分来自w3schools

  // 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 dont match the search query
for (i = 0; i < tr.length; i++) {
    tdArray = tr[i].getElementsByTagName("td");
    for (n = 0; n < tdArray.length; n++) {
        td = tdArray[n];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
              break;
            } else {
              tr[i].style.display = "none";
            }
          }
        }
    }
}
.row_zarmlistitem:nth-child(even) {
        background: #e8ecf1;
<table class="table_list" id="myTable">

        <tr class="mobilesort_list">
            <th class="cursor_list header1_position_list name_list" onclick="sortTable(0)">Name ⇅</th>
            <th class="cursor_list header2_position_list firstname_list" onclick="sortTable(1)">First Name ⇅</th>
            <th class="head_list title_list">Title</th>
            <th class="cursor_list header3_position_list" onclick="sortTable(3)">Department ⇅</th>
            <th class="head_list phone_list">+49 421 218-</th>
            <th class="head_list room_list">Building, Room</th>
            <th class="head_list">Email Address</th>
            <th class="head_list">Information</th>
        </tr>

        <f:for each="{addresses}" as="address" iteration="iterator" reverse="1"> 
        <f:render partial="ZarmListItem" arguments="{_all}"/>
        </f:for>

    </table>

第一次使用 JavaScript，也从未使用过 jquery 或其他东西，但我希望得到你们的帮助！

阅读 114

2022-07-25

共1个答案

一尘不染

这只是归结为隐藏元素和删除元素之间的区别。当我们隐藏一个元素时，它仍然存在。当我们删除一个元素时，它不是。这会影响样式在桌子上的工作方式，因为这适用于那里的元素，而不仅仅是那些可见的元素。

function hide() {
  document.getElementById("a").style.display = "none";
}

function remove() {
  document.getElementById("a").remove();
}
.c:nth-child(even) {
  background: red;
}
<table>
  <tr class="c">
    <td>1</td>
  </tr>
  <tr class="c">
    <td>2</td>
  </tr>
  <tr id="a" class="c">
    <td>3</td>
  </tr>
  <tr class="c">
    <td>4</td>
  </tr>
</table>

<button onclick="hide()">hide</button><button onclick="remove()">remove</button>

2022-07-25