Question

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

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

Answer 1

使用:eq() selector之类的，

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

可以缩短代码并加快运行速度

int a;

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

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

7 个答案: