在数据表中编辑后突出显示行

Question

I new to Jquery and Javascript.

I am using datatables to show some data

I am trying to highlight specific rows, ie : rows that have been edited after inline edit. I am using the inline edit (from https://github.com/ejbeaty/CellEdit ). The code that I have modified in " Advanced.js" is as follows :

    function myCallbackFunction (updatedCell, updatedRow, oldValue) {



   if (updatedCell.data() == "Bradley")
        {
            console.log("highlight required for Name Bradley")
            $(updatedRow).css( "background-color", "Orange" )

        }

    console.log("The new value for the cell is: " + updatedCell.data());
    console.log("The old value for that cell was: " + oldValue);
    console.log("The values for each cell in that row are: " + updatedRow.data());
}

In the callback function I am trying to change the background color for a specific name. I can see the console.log but the color changes seem to have not taken up.

Answer 1

Did not knew this CellEdit plugin before, but it looks to be really nice, decent and straight forward. Instead of copying an example it is sometimes better to produce a small minimal example from scratch. Look at this

var table = $('#example').DataTable({
}).MakeCellsEditable({
  onUpdate: function(cell, row, oldValue) { 
    if (cell.data() != oldValue) {
      row.nodes().to$().addClass('highlight')
    }   
  }
})  

I forgot .nodes() in the comment, sorry for that - but the above works -> http://jsfiddle.net/Lccju5bq/

Answer 2

try this `

  if (updatedCell.data() == "Bradley")
    {
        console.log("highlight required for Name Bradley")
        var updatedRow = document.getElementbyId("updatedRow);
        updatedRow.style.background = 'black';

    }