javascript - :nth-child(even) 选择器按具有特定元素的类

Question

我有一张表，其偶数行为浅灰色背景，奇数行为白色。它通过使用 .tr:nth-child(even) {} 完美运行

HTML

<table>
    <tr></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
    <tr></tr>
</table>

CSS

tbody tr:nth-of-type(even) {
    background-color: var(--bg);
}

我创建了一个搜索字段，通过为不匹配的元素添加hidden类来过滤表行，之后它不起作用。trtr:nth-child(even)

我试图search-result在匹配的元素上添加类，然后我做了tr:nth-of-type(even) { .... }，也没有奏效。

有什么办法可以做到吗？例如，一种按类选择偶数元素的方法？

标签： javascripthtmlcss

Answer 1

使用我在底部的概念证明的变体修复了评论中的 codepen 版本。计数索引以检查是否偶数（不包括具有 display:none 的元素）每次更新都完成。这可能需要针对非常大的表进行优化。

function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("input");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
  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";
      }
    }       
  }
  //let table = document.getElementsByTagName('table')[0]
(function(){
let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
  el.style.display !== 'none' && i++ % 2 === 0 ? el.classList.add('even') : el.classList.remove('even'))
})()
}

* {
  box-sizing: border-box;
}
#input {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#table {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#table tr {
  border: 1px solid #ddd;
  margin-top: -1px; 
  background-color: #fff;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
}
#table th, #table td {
  text-align: left;
  padding: 12px;
}
#table tr :not(td) {
  background-color: #424242;
  color: white;
}
#table tr:not(.even) {
  background-color: #eee!important;
}

<input type="text" id="input" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="table">
  <tr>
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Age</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>22</td>
  </tr>
      <tr>
    <td>malik</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Asal</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Asal</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Asali</td>
    <td>40</td>
  </tr>
    <tr>
    <td>malik</td>
    <td>40</td>
  </tr>
    <tr>
    <td>maaaalik</td>
    <td>40</td>
  </tr>
</table>

选择非隐藏并使用计数器查找偶数。添加类。

let table = document.getElementsByTagName('table')[0]

let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
  i++ % 2 === 0 && el.classList.add('even'))

.even {
  background-color: red;
}

.hidden {
  opacity: 0.2;
}

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr class="hidden">
    <td>2</td>
  </tr>
  <tr class="hidden">
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr class="hidden">
    <td>2</td>
  </tr>
  <tr class="hidden">
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr class="hidden">
    <td>2</td>
  </tr>
  <tr class="hidden">
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr class="hidden">
    <td>2</td>
  </tr>
  <tr class="hidden">
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
</table>