reload nth:child after filtering table

Question

I am new to all of this and need some help. I would like to get to work "nth:child(even)" right while i am using my filter. Big part of my JavaScript-Code is from 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>

First time working with JavaScript and also never worked with jquery or something else but i would love some help from you guys!

You are only hiding rows using `display: none` here, but that does not remove them from the DOM. And `:nth-child` is based on the DOM structure. — CBroe, Jul 25 '22 at 08:51
https://stackoverflow.com/q/44033256/1427878, https://stackoverflow.com/q/68104776/1427878 — CBroe, Jul 25 '22 at 08:53

score 0 · Accepted Answer · answered Jul 25 '22 at 09:01

This just comes down to the difference between hiding an element, and removing an element. When we hide an element, it's still there. When we remove an element, it isn't. This affects how the styling works on the table, because that works on the elements that are there, not just those which are visible.

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>

reload nth:child after filtering table

1 Answers1