如何更改jQuery jTable特定行中的背景颜色？

Question

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

上面的代码可能会改变所有行颜色，我可以指定行号吗？

Answer 1

使用：eq（）选择器，如，

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

更新后你可以动态设置索引

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

Answer 2

Rohan Kumar和raevilman的回答很好。 但是使用data.row可以缩短代码并加快运行速度

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

Answer 3

以下示例将更改第4行背景颜色

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

或者，您可以使用伪类选择器：eq（）来选择您想要的数字，这也使用基于0的索引。

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

Answer 4

尝试这个。

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

Answer 5

动态获取行ID
使用如下

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

Answer 6

建立raevilman的答案，由于一些细节，这对我来说不起作用：使用rowIndex我得到的索引从1开始，但是下面的CSS路径的第一行索引为0 ，因此当我赋值时为-1到变量索引 。

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

            }
        }

这正确地以红色突出显示“value”字段大于100的行。

Answer 7

要在加载表后执行此操作，并且如果您知道该行的键，则可以使用以下命令：

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