CSS nth-child 在类更改后不刷新-解网

问：

我有一个带有交替背景颜色行的表格。我使用一个非常简单的 javascript 进行表格过滤。我正在使用 tailwind css。

现在，当我使用 javascript 更改类时，它会按预期更新行的可见性，但不会更新行的背景颜色。

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


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

function updatetable()
{
    var search = '';
    search = document.getElementById("table-search").value;
    search = search.toLowerCase();
    console.log(search + "\n" + select.value);

    var rows  = table.getElementsByTagName("tr");

    var row;
    var txtvalue = '';

    for (var i in rows)
    {
        row = rows[i];
        
        if (select.value == 'name') {
            txtvalue = row.getElementsByTagName("th")[0].textContent || row.getElementsByTagName("th")[0].innerText;
            console.log(txtvalue);
            if (txtvalue.toLowerCase().includes(search)) {
                if (row.classList.contains("table-row-hide")) {
                    row.classList.remove("table-row-hide");
                    row.classList.add("table-row-show");
                }
            }
            else
            {
                if (row.classList.contains("table-row-show")) {
                    row.classList.remove("table-row-show");
                    row.classList.add("table-row-hide");
                }
            }
        }
    }
}

.table-row-show:nth-child(odd)
{
    @apply bg-white dark:bg-gray-900;
}

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

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

JavaScript HTML CSS

CSS nth-child 在类更改后不刷新

CSS nth-child not refreshing after class change

评论

评论