如何更改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);