如何在实时搜索表上应用奇偶运算？
如何在实时搜索表上应用奇偶运算？
提问于 2019-05-12 20:33:09
我创建了一个从数据库获取数据的页面，并将数据输出到一个表中。我想对我的桌子进行实时搜索，所以下面的脚本是我在互联网上找到的。
现在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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-12 21:13:40
正如@rickdenhaan在他的评论中建议的那样，你可以在jQuery中使用:visible选择器，为当前可见的偶数行和奇数行提供不同的颜色。
试着这样做：
$(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" ));
});
});
});我希望它能有所帮助:)
Stack Overflow用户
发布于 2019-05-12 23:17:51
这是一个带有注释的香草口味的解决方案。
(设置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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56099282
复制相关文章
相似问题