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;
}

.addClass不会覆盖原生单元格背景颜色

1 个答案: