在数据表中编辑后更改单元格的颜色

如何解决在数据表中编辑后更改单元格的颜色

我有一个表格，我可以在其中编辑和修改每个单元格。
我想突出显示我修改过的单元格。
目前我只能突出显示整行，但我没有我想做的事情。
我使用 createdRow 使单元格可编辑并获取修改后的行。

如何突出显示修改后的单元格？

var table  = $("#deploymentMap_table").DataTable({
    data: constructraws(dataSet),//tbody
    paging:   false,searching: false,info: false,fixedHeader: true,scrollY: false,scrollX: false,responsive: false,dom: 't',//display only the table
    order: [[ 0,'asc' ]],//order by 'service' col
    columnDefs:[
        {
            targets:'_all',render:function(data){
                if(data == null) {return ""
                } else {return data;}
            }   
        },{ targets: [0,1],"width" : "200px"},],columns: constructColumns(dataSet),//thead 
    dom: 'Bfrtip',// attribute classname (background color) for services
    rowCallback: function(row,data,index){
        if ( data.code == 1 ) {
            $('td',row).each( function ( value,index ) {
                if($(this).contents().first().text()){
                    $(this).addClass('td_colorCD');
                }
            } );
        }
        $(row).find('td:eq(0)').css('background-color','#7f7f7f').css('color','#fff').css('text-align','left');
        $(row).find('td:eq(1)').css('background-color','left');

        $.each(row.childNodes,function(i,value){
            if(value.innerText == "NoUP"){
                $(value).addClass('td_colorBSF');
            }
            else if(value.innerText){
                $(value).addClass('td_color');
            }
        })
    },// Make all cell editable
    createdRow: function(row,dataIndex,cells) {

        console.log(cells);
        let original

        row.setAttribute('contenteditable',true)
        row.setAttribute('spellcheck',false)

        row.addEventListener('focus',function(e) {
            original = e.target.textContent
        })

        row.addEventListener('blur',function(e) {

            if (original !== e.target.textContent) {

                $('td',row).removeClass();
                $('td',row).addClass('td_color_change');

                const r = table.row(e.target.parentElement)
                r.invalidate();

                var lign = e.target.innerText;
                lign = lign.split('\t');

                var nRow =  $('#deploymentMap_table thead tr')[0].innerText;
                head = nRow.split('\n\t\n');

                var newAR = mergeArrayObjects(head,lign);
                console.log("newAR",newAR);

                $(dataSet).each(function( index,values ) {
                    if(newAR.service[0].Services == values.service_name){
                        delete values.regions;
                        values.regions = newAR.region;
                        console.log(values);
                    }
                })
                console.log("dataset",dataSet);
            }
        })
    }
});

解决方法

我认为处理此问题的最简单方法是将您的 rowCallback 替换为 DataTables delegated event。

下面是一个简单的例子，当你离开那个单元格时，它会改变特定单元格的颜色：

步骤 1) onblur 事件要求单元格具有 tabindex 属性。您可以随意添加它 - 但这是一种方法，在您现有的代码中：

$.each(row.childNodes,function(i,value){
  $(value).attr('tabindex',i); // this line is new
  // your existing code goes here
})

注意 - 这可以改进，因为它跨行重复标签索引。但它说明了该方法。

第 2 步：在 DataTable 定义结束后添加一个新的 onblur 事件侦听器：

$('#deploymentMap_table td').on('blur',function () {
  this.classList.remove("td_color");
  this.classList.add("td_color_change");  
} );

第 3 步：需要增强上述代码以包含您的编辑检查逻辑，该逻辑检查实际的单元格值更改。

您可以使用以下方法获取“之前”单元格值：

table.cell( this ).data();

以及使用它的“之后”单元格值 - 它从 HTML 表（DOM 节点）而不是从 DataTables 获取值：

table.cell( this ).node().textContent;

更新后的监听器将是这样的：

$('#deploymentMap_table td').on('blur',function () {
  var cellValueStart = table.cell( this ).data();
  var cellValueEnd = table.cell( this ).node().textContent;
  //console.log( cellValueStart );
  //console.log( cellValueEnd );
  if (cellValueEnd !== cellValueStart) {
    table.cell( this ).data(cellValueEnd);
    this.classList.remove("td_color");
    this.classList.add("td_color_change");
  }
} );

table.cell( this ).data(cellValueEnd) 命令更新 DataTables 中的单元格，使其与您在 HTML 单元格中键入的值相匹配。如果您不这样做，那么 DataTables 对象中的数据（在幕后）将与 HTML 表格中的数据（您在屏幕上看到的内容）不同步。

警告：这种方法是基本的。它不包括用户可能执行以下操作的情况：

将单元格从“A”编辑为“B”。
离开单元格，使其突出显示。
返回单元格并将其从“B”编辑回“A”。
再次离开牢房。

在这种情况下，单元格将保持突出显示。

解决此问题的一种方法是在您第一次加载表格时捕获每个单元格的原始状态 - 然后根据原始数据中的值检查每次编辑。如果需要，可以这样做 - 但不在此问题的范围内。但这也取决于您在编辑完数据后需要对数据做什么。如果这对您很重要，那么可能值得针对该特定问题提出一个新问题。