表格筛选后nth-child(even)样式正常生效的技术求助

问题原因 #

你用display: none隐藏不匹配的行后，这些行仍然留在DOM结构里。CSS的:nth-child(even)是根据DOM中的原始位置选择元素，不是根据当前可见行的顺序，所以筛选后可见行的奇偶背景会乱掉。

解决方案 #

我们改用JS动态给可见行添加奇偶样式类，替代CSS的:nth-child选择器，步骤如下：

1. 修改CSS样式

把原来的奇偶行样式换成自定义类：

.row_zarmlistitem.even-row {
    background: #e8ecf1;
}

2. 重写筛选JS函数

这段代码会完成筛选，并给可见行重新设置奇偶样式：

function filterTable() {
    // 声明变量
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("myTable");
    var tr = table.getElementsByTagName("tr");
    var tdArray, td, txtValue, isMatch;

    // 第一步：重置所有数据行的状态（跳过表头）
    for (var i = 0; i < tr.length; i++) {
        if (tr[i].classList.contains("mobilesort_list")) continue;
        tr[i].classList.remove("even-row");
        tr[i].style.display = "none";
    }

    // 第二步：筛选匹配的行并显示
    for (i = 0; i < tr.length; i++) {
        if (tr[i].classList.contains("mobilesort_list")) continue;
        tdArray = tr[i].getElementsByTagName("td");
        isMatch = false;
        
        for (var n = 0; n < tdArray.length; n++) {
            td = tdArray[n];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    isMatch = true;
                    break;
                }
            }
        }
        
        if (isMatch) {
            tr[i].style.display = "";
        }
    }

    // 第三步：给可见数据行设置奇偶样式
    var visibleRows = [];
    for (i = 0; i < tr.length; i++) {
        if (tr[i].style.display !== "none" && !tr[i].classList.contains("mobilesort_list")) {
            visibleRows.push(tr[i]);
        }
    }
    
    for (i = 0; i < visibleRows.length; i++) {
        // 索引从0开始，第2、4...行（显示顺序的偶数行）加样式类
        if (i % 2 === 1) {
            visibleRows[i].classList.add("even-row");
        }
    }
}

3. 绑定筛选事件到输入框

在你的搜索输入框上添加oninput事件，实时触发筛选：

<input type="text" id="myInput" oninput="filterTable()" placeholder="输入关键词筛选...">

为什么这样有效？ #

• 先重置所有数据行的样式和显示状态，避免之前的筛选残留影响。
• 筛选完成后，单独收集当前可见的数据行，再根据它们的显示顺序给偶数位置的行添加背景样式类，完全不受隐藏行的影响。

内容的提问来源于stack exchange，提问作者papapixxel