jquery在数据表中标记新添加的行

Question

我的html页面中有一个现有的数据表，我尝试使用fnAddData添加新行

var addId = vandropDatatable.fnAddData(["1", "2"]);

如何找到新添加的行以为其添加一些类（例如addClass（“New_item”））

Answer 1

已更新，以反映dataTables 1.10.x.以下原始答案的目标是1.9.x.它仍然适用，但1.10.x API方式更强大：

$("#add").click(function() {
    var row = table.row.add([
        'new',
        'new',
        'new',
        'new',
        'new'
    ]).draw();
    row.nodes().to$().addClass('newRow');
});

1.10.x演示 - ＆gt;的 http://jsfiddle.net/0scq8rkm/

在1.10.x中，您将获得一个API对象，并保留该行。 nodes().to$()允许您使用内部行节点，因为它是一个jQuery对象。

---

假设您想要为新<tr>提供以下布局：

tr.newRow {
    background-color: red;
    font-size: 20px;
}

你有一个添加按钮：

<button id="add">add new row</button>

现在，当点击添加按钮时，使用返回的rowindex为新创建的<tr>获取通过函数fnGetNodes的正确行：

$("#add").click(function() {
    var rowIndex = dataTable.fnAddData([
        'new',
        'new',
        'new',
        'new',
        'new'
    ]);
    var row = dataTable.fnGetNodes(rowIndex);
    $(row).removeClass().addClass('newRow');
});

看小提琴 - ＆gt;的 http://jsfiddle.net/q4E3Y/

Answer 2

尝试将fnRowCallback更改为以下内容：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  nRow.className = "your new class";
  return nRow;
}

http://datatables.net/examples/advanced_init/row_callback.html

Answer 3

对我有用的是添加新行，绘制然后使用node()获取新添加的行。

$("#add").click(function() {
    var newRow = table.row.add([
        'new',
        'new',
        'new',
        'new',
        'new'
    ]).draw().node();
    $(newRow).addClass('newRow');
});

这遵循documentation中列出的相同流程。