jQuery 数据表将类添加到 tr答案

【问题标题】：jQuery datatables add class to trjQuery 数据表将类添加到 tr
【发布时间】：2015-12-14 21:47:42
【问题描述】：

我正在使用 jQuery 和数据表。我想向特定行的 TR 元素添加一个类。我知道如何找到行。 console.dir(row); 显示 row 对象，它以 tr 元素开头。我不能让 jQuery 选择器做任何事情。我错过了什么？

table = $('#resultTable').DataTable({
    aaSorting: [],
    ajax: {...},
    columnDefs: [...],
    createdRow: function (row, data, index) {
        //
        // if the second column cell is blank apply special formatting
        //
        if (data[1] == "") {
            console.dir(row);
            $('tr', row).addClass('label-warning');
        }
    }
});

【问题讨论】：

你就不能$(row).addClass('label-warning');吗？
你为什么不做$(row).addClass(...)？如果row 本身就是tr，$('tr', row)（或$(row).find('tr')）将只能找到嵌套的trs。
嘿，我以为我试过$(row).addClass("label-warning");但没有成功......现在它可以工作了。 :-}

标签： javascript jquery datatables

【解决方案1】：

$('tr', row) 在 row 的上下文中寻找一个 tr 元素，这意味着它将在作为上下文参数提供的row 内部搜索一个 tr 元素。

根据API，这应该可以工作

$(row).addClass("label-warning");

【讨论】：

谢谢，如上所述，我以为我已经这样做了，但我一定犯了其他错误。谢谢

【解决方案2】：

您只需要使用 createdRow

$('#data-table').DataTable( {
    createdRow: function( row, data, dataIndex ) {
        // Set the data-status attribute, and add a class
        $( row ).find('td:eq(0)')
            .attr('data-status', data.status ? 'locked' : 'unlocked')
            .addClass('asset-context box');
    }
} );

【讨论】：

如果您不想要第一个 TD，而只想在 tr 中添加一个类，请使用以下行：$(row).addClass('asset-context box');

【解决方案3】：

DataTable().row.add()情况：

如果你想在Datatables中使用行添加功能时添加类，你可以从node()方法中获取TR-DOM：

var datatable = $('#resultTable').DataTable();

var trDOM = datatable.row.add( [
    "Col-1",
    "Col-2"
] ).draw().node();

$( trDOM ).addClass('myClass');

【讨论】：

【解决方案4】：

要在<tr> 上设置类名，请使用此回调

createdRow: function (row, data, dataIndex) {
    $(row).addClass('some-class-name');
},

参考：https://datatables.net/reference/option/createdRow

要在<td>上设置一个类使用

"columns": [
{ 
    data:"",
    className: "my_class",
    render: function (data, type, row) { return "..."; }
},
{ 
    data:"",
    className: "my_class",
    render: function (data, type, row) { return "..."; }
},
//...
]

类似于“columnDefs”的东西

参考：https://datatables.net/reference/option/columns.className

要在<tr> 行上设置Id 属性，请使用：

//.... 
rowId: "ShipmentId",
columns: [...],
//....

【讨论】：

这会将其添加到<td> 而不是<tr>

【解决方案5】：

您还可以通过发送到数据表的 json 数据将类添加到 tr。每个json项有DT_RowClass就够了。
例如：

{

    DT_RowAttr = new
    {
       attr1 = "1",
       attr2 = "2"
    }
    DT_RowClass = "majid",
    DT_RowId = "rowId"

}

在此示例中，DT_RowId 值适用于任何tr 标记的id 属性，DT_RowAttr 值将一些自定义属性应用于tr 标记。

【讨论】：

【解决方案6】：

另一种解决方案：

createdRow: function (row,data) {
    var stsId = data.Ise_Sts_Cost_ID;
    if (stsId == 3)
        $(row).addClass('table-warning');
    else if (stsId == 4)
        $(row).addClass('table-success');
    else
        $(row).addClass('table-danger');
}

【讨论】：