如何在实时搜索表上应用奇数和偶数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我创建了一个页面,它从数据库中获取数据并在表格中输出数据。我想现场搜索我的桌子,所以下面的脚本是我在互联网上找到的。

现在奇怪和均匀的样式都在CSS中。如果我在桌子上搜索样式很奇怪,因为它从头开始应用样式,而不是搜索后的样式。

问题:搜索后我有多个相同颜色的tr

脚本:

$(document).ready(function(){
  $("#mySearchbar").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not(.th)").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

CSS:

  tr:nth-child(odd) {
    background-color: #CCCCCC;
  }

  tr:nth-child(even) {
    background-color: #FFFFFF;
}
提问于
用户回答回答于

正如@rickdenhaan在他的评论中建议你可以使用:jQuery的可见选择器为当前可见的偶数行和奇数行提供不同的颜色。

试试这样:

$(document).ready(function(){
  $("#mySearchbar").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not(.th)").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    // re-setting bg color based on visibility 
    $("#myTable tr:not(.th)").filter(":visible").each(function(index) {  
      $(this).css("background-color", ( index%2 ? "#FFFFFF" : "#CCCCCC" ));
    });
  });
});

我希望它有帮助:)

用户回答回答于

这是一个带有评论的香草味解决方案。

(设置style属性的display属性可能比设置慢line-height,但避免需要考虑仅限空白的节点。)

// Identifiers
const rows = document.querySelectorAll("#myTable TR:not(.th)"),
      searchbar = document.getElementById("mySearchbar");
let searchString;

// Listener
searchbar.addEventListener("keyup", function(){
  
  // Binds `searchString` to the input's current value 
  searchString = event.target.value.trim().toLowerCase();
  
  // Applies the "displayed" CSS class to rows containing the search string
  [...rows].forEach(row => { // The spread operator gives us a proper Array
    if(row.textContent.toLowerCase().indexOf(searchString) > -1){
      row.classList.add("displayed"); }
    else{
      row.classList.remove("displayed");
    }
  });

  // Applies alternating background colors to the displayed rows
  [...rows].filter(row => row.classList.contains("displayed"))
           .forEach((displayedRow, index) => {
              // Uses the modulo operator (on the index of each row in the filtered array)
              //   to set the condition in the ternary operator to set background color
              displayedRow.style.backgroundColor = 
                index % 2 == 0 ? "#DDDDDD" : "#BBBBBB";
  });
});

tr.th {
  background-color: #888888;
  color: #FFFFFF
}
td {
  padding-right: 1ch;
  padding-left: 1ch;
}

tr.displayed{
  /* Use default display style for displayed rows */
  display: ;
}

tr:not(.th):not(.displayed){
  display: none;
}

/* A possibly faster alternative: 
  tr.displayed td {
    font-size: 1em;
    line-height: 1em;
  }
  tr:not(.th):not(.displayed) td {
    font-size: 0;
    line-height: 0;
  }
*/

<input id="mySearchbar" />
<table id="myTable">
  <tr class="th"><td>Col1</td><td>Col2</td><td>Col3</td></tr>
  <tr class="displayed"><td>The </td><td>quick</td><td>brown</td></tr>
  <tr class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
  <tr class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
  <tr class="displayed"><td>The</td><td>quick</td><td>brown</td></tr>
  <tr class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
  <tr class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
  <tr class="displayed"><td>The</td><td>quick</td><td>brown</td></tr>
  <tr class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
  <tr class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
</table>

扫码关注云+社区

领取腾讯云代金券