如何获取DataTable新增行的所有单元格并修改元素属性？

数据老陈

2026-6-21

解决DataTables添加新行后仅遍历该行单元格的问题

问题原因

你当前使用newRow.cells().every()会遍历整个表格的所有单元格，是因为DataTables的cells()方法在不传入参数时，默认返回表格内所有单元格的集合，而非仅当前行的单元格。

解决方案

以下两种方法均可实现仅遍历新添加行的单元格，并为其设置ID、类名、点击事件等属性：

方法一：通过`cells()`参数限定行范围

调用cells()时传入新行的DOM节点作为第一个参数，第二个参数*表示该行的所有列，这样就能精准获取当前行的所有单元格：

var newRow = myTable.row.add([
    questionText,
    '',
    '',
    '',
    '',
    ''
]).draw(false);

// 仅遍历新添加行的单元格
newRow.cells(newRow.node(), '*').every(function() {
    var cell = $(this.node());
    // 设置单元格ID
    cell.attr('id', `cell-${this.index().column}`);
    // 添加自定义类名
    cell.addClass('custom-table-cell');
    // 绑定点击事件
    cell.on('click', function() {
        console.log('单元格被点击：', $(this).text());
    });
});

方法二：直接获取行DOM元素遍历单元格

先获取新行的DOM节点，再通过jQuery选择器定位该行下的所有<td>元素进行遍历：

var newRow = myTable.row.add([
    questionText,
    '',
    '',
    '',
    '',
    ''
]).draw(false);

// 获取新行的DOM节点
var rowDom = newRow.node();
// 遍历该行下的所有单元格
$(rowDom).find('td').each(function(colIndex) {
    var cell = $(this);
    // 设置属性与事件
    cell.attr('id', `cell-${colIndex}`);
    cell.addClass('custom-table-cell');
    cell.on('click', function() {
        console.log('单元格被点击：', $(this).text());
    });
});