Question

我创建了一个页面，该页面从数据库中获取数据并将数据输出到表中。我想实时搜索我的桌子，所以下面的脚本就是我在网上找到的脚本。

现在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;
}

Answer 1

正如@rickdenhaan在他的评论中建议的那样，您可以将：visible选择器与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" ));
    });
  });
});

我希望这会有所帮助：）

Answer 2

这是带有注释的香草味解决方案。

（设置样式属性的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>

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

2 个答案: