How can I change the background color in a specific row of jQuery jTable?

Question

rowInserted: function (event, data) {
   if (data.record) {
       if (condition1 == condition2) {
          $('#div1').find(".jtable tbody tr").css("background", "#F5ECCE");
       }
   }
}

the above code could be changing all row color, can i specify row number?

Answer 1

Use :eq() selector like,

rowInserted: function (event, data) {
   if (data.record) {
       if (condition1 == condition2) {
          $('#div1').find(".jtable tbody tr:eq(1)").css("background", "#F5ECCE");
          // changing first row background color
       }
   }
}

Updated you can set index dynamically like

$('#div1').find(".jtable tbody tr:eq("+index+")").css("background", "#F5ECCE");

Answer 2

Rohan Kumar and raevilman's answer works fine. But the code can be shortened and runs faster by using data.row

rowInserted: function (event, data) {
   if (data.record) {
       if (condition1 == condition2) {
          data.row.css("background", "#F5ECCE");
       }
   }
}

Answer 3

Try this.

var rowNumber = 1;
$('#div1').find(".jtable tbody tr").eq(rowNumber).css("background", "#F5ECCE");

Answer 4

The example below will change the 4th rows background color

var $rows = $('#div1').find(".jtable tbody tr");
var ROWNUMBER = 3;
$($rows[ROWNUMBER]).css("background", "#F5ECCE");

Alternatively you can use the pseudo class selector :eq() to select the number you want only, this also uses 0 based indexing.

var ROWNUMBER = 3;
var $row = $('#div1').find(".jtable tbody tr:eq(" + ROWNUMBER + ")");    
$row.css("background", "#F5ECCE");

Answer 5

To get row id dynamically
Use like following

rowInserted : function(event, data) 
        {
           var index = data['row'][0]['rowIndex'];
           $('#npoDiv').find(".jtable tbody tr:eq("+index+")").css("background", "green");
        }

Answer 6

Building up on raevilman's answer which was not working for me due to a little detail: with rowIndex I get indices starting at 1, but the CSS path below has the first row indexed at 0, hence the -1 when i assign the value to the variable index.

        rowInserted: function(event, data) {
            if (data.record.value>100){
                var index = data['row'][0]['rowIndex']-1;
                console.log('decorating row with index: '+index);
                $('#div1').find(".jtable tbody tr:eq("+index+")").css({"background":"red"});

            }
        }

This correctly highlights in red the rows whose "value" field is greater than 100.

Answer 7

To do this after the table has been loaded, and if you know the key of the row, you can use the following:

    $("tr[data-record-key=" + rowKey + "]").addClass(rowClass);