javascript - .addClass 不会覆盖 native 单元格背景颜色

Question

我有一个从服务器端数据库填充的动态表。当表格初始化时，它循环遍历表格并根据条件设置特定列的背景颜色。

function VCColor(){
    var targetTable = document.getElementById('dataTable');

    //Loop through table rows
    for (var rowIndex = 1; rowIndex < targetTable.rows.length; rowIndex++) {
        var rowData = '';

    //  item number defines column to filter
        rowData = targetTable.rows.item(rowIndex).cells.item(12).textContent;

        if (rowData == 'N'||rowData =='n') {
            targetTable.rows.item(rowIndex).cells.item(13).style.backgroundColor= '#ff3333';
            targetTable.rows.item(rowIndex).cells.item(13).style.color= 'white';
        } else if (rowData == 'Y'||rowData =='y') {
            targetTable.rows.item(rowIndex).cells.item(12).style.backgroundColor= '#2eb82e';
            targetTable.rows.item(rowIndex).cells.item(12).style.color= 'white';
        }

    };  

};

还有一个内置函数会临时添加一个类 (editable_updated)，该类将单元格背景着色为绿色，作为视觉提示，表明更改已实际保存并且数据库已更新。 (下面的代码)

$("#dataTable").children('tbody').on('editComplete', 'td', function(event, config){
    var $this = $(this),
        newContent = $this.text(),
        cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
        rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id

    // Do whatever you want here to indicate
    // that the content was updated
    $this.addClass( 'editable_updated' ); // green background + white text
        setTimeout(function(){
        $this.removeClass( 'editable_updated' );
    }, 500);

});

这适用于所有其他没有任何类型的预设样式的单元格。但是，如果更新了具有预设样式的单元格；该类不会被添加，单元格在初始加载时保持红色/绿色。这让用户感到困惑，因为他们认为更改没有得到保存。

我已经尝试用另一个类处理初始加载，但我无法正确加载页面。

提前致谢!

Answer 1

因为您的 VColor 函数将内联样式添加到表格单元格，所以您需要在 CSS 中使用 !important 来覆盖样式。

.editable_updated {
    background: green !important;
}