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

Question

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

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

如何找出新增的行并为其添加一些类（例如addClass("New_item")）

- VinhNT

---

你能为此制作一个 JSFiddle 吗？ - Anoop Joshi P

@AnoopJoshi “添加新行”功能可以在这里看到：http://www.sprymedia.co.uk/dataTables/example_add_row.html - VinhNT

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演示 -> 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>

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

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

查看代码示例-> http://jsfiddle.net/q4E3Y/

- davidkonrad

Answer 2

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

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

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

- Bhupendra Shukla

---

我只想为onerow添加新类，我的情况如下：

1. 渲染表格完成后，添加“添加新按钮”
2. 点击添加新按钮后，在现有数据表中添加新行并突出显示新添加的行。如果在回调中这样做，所有行都具有相同的类，因此不会突出显示任何行。

- VinhNT

Answer 3

我的解决方法是先添加新行，然后绘制并使用node()获取新添加的行。

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

这遵循了文档中列出的相同流程。

- devlin carnate