CSS nth-child类切换后未刷新背景色问题求助

问题描述 #

表格采用Tailwind CSS实现行背景色交替显示，通过JavaScript切换类控制行的显示/隐藏来实现筛选功能。目前筛选后行的可见性正常，但可见行的背景色未重新交替，仍然按照DOM原始结构的奇偶性渲染。

问题原因 #

CSS的nth-child(odd/even)选择器是基于DOM节点在父元素中的原始位置计算的，隐藏的行并未从DOM中移除，只是设置了display: none，因此筛选后可见行的DOM位置奇偶性没有变化，导致背景色混乱。

解决方案 #

方法1：JavaScript手动给可见行添加奇偶类（推荐，兼容性好）

通过筛选后收集所有可见行，重新计数并添加自定义的奇偶背景类，替代原有的nth-child选择器。

修改JavaScript代码：

document.getElementById("table-search").addEventListener('input', updatetable, false);

var table = document.getElementById("data-table-body");
var select = document.getElementById("tablefilter");

function updatetable() {
    const search = document.getElementById("table-search").value.toLowerCase();
    const rows = table.getElementsByTagName("tr");
    const visibleRows = [];

    // 遍历所有行，控制显示隐藏并收集可见行
    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        if (select.value === 'name') {
            const txtvalue = row.getElementsByTagName("th")[0].textContent.toLowerCase();
            if (txtvalue.includes(search)) {
                row.classList.remove("table-row-hide");
                row.classList.add("table-row-show");
                visibleRows.push(row);
            } else {
                row.classList.remove("table-row-show");
                row.classList.add("table-row-hide");
                row.classList.remove("bg-odd", "bg-even"); // 清除奇偶类避免干扰
            }
        }
    }

    // 给可见行重新设置交替背景
    visibleRows.forEach((row, index) => {
        row.classList.remove("bg-odd", "bg-even");
        row.classList.add(index % 2 === 0 ? "bg-odd" : "bg-even");
    });
}

修改CSS代码：

/* 自定义奇偶背景类 */
.bg-odd {
    @apply bg-white dark:bg-gray-900;
}

.bg-even {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table-row-hide {
    display: none;
}

方法2：使用CSS :nth-child(of ...) 选择器（需浏览器支持）

利用CSS的nth-child(of <selector>)语法，仅针对可见的.table-row-show行计算奇偶性，无需修改JS，但注意浏览器兼容性（Chrome 111+、Firefox 113+支持）。

修改CSS代码：

/* 仅针对可见行计算奇偶 */
#data-table-body .table-row-show:nth-child(odd of .table-row-show) {
    @apply bg-white dark:bg-gray-900;
}

#data-table-body .table-row-show:nth-child(even of .table-row-show) {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table-row-hide {
    display: none;
}

总结 #

方法1兼容性更强，逻辑清晰，适合大多数场景；方法2更简洁，但受限于浏览器版本。根据项目需求选择即可。

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