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

【问题标题】：How can I change the background color in a specific row of jQuery jTable?如何更改 jQuery jTable 特定行中的背景颜色？
【发布时间】：2013-10-21 04:55:51
【问题描述】：

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

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

【问题讨论】：

标签： jquery css jquery-jtable

【解决方案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");

【讨论】：

是否可以动态获取行？
我在哪里得到index（行号）值？
@user2119324 index 和 row number(starting from 0) 在这里是一样的。
如果你想得到当前索引你应该写： var rowCount = $('.jtable tr').length;然后在您的索引中 -> 您的写入 rowCount-1 （在 eq 选择器中）

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个。

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

【讨论】：

是否可以动态获取行号？

【解决方案4】：

下面的例子将改变第 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");

【讨论】：

是否可以动态获取行？
@user2119324 您可以将 ROWNUMBER 设置为您喜欢的任何值，或者如果您在末尾附加一行，您可以使用 $('#div1').find('.jtable tbody tr' ).last().css()

【解决方案5】：

动态获取行ID
如下使用

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

【讨论】：

【解决方案6】：

以 raevilman 的回答为基础，由于一些细节，该回答对我不起作用：使用 rowIndex 我得到从 1 开始的索引，但下面的 CSS 路径的第一行索引为 0，因此当我分配时为 -1变量 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"});

            }
        }

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

【讨论】：

【解决方案7】：

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

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

【讨论】：