点击按钮为DataTables新增行时添加行ID失败，求助解决

看你的描述，应该是在给DataTables添加新行时，行ID一直没成功绑定，而且你还加了点击行弹出ID的测试功能对吧？先看你贴的代码片段，发现一个明显的问题：你在#addRow的点击事件里又嵌套绑定了.progress-button的点击事件——这会导致每次点添加按钮都重复绑定一次事件，逻辑完全乱了，这肯定会影响行ID的设置流程。

给你一套靠谱的实现方案，直接用DataTables的官方API来添加行并设置ID，保证能生效：

完整代码示例 #

// 先初始化你的DataTables（替换成你的表格实际ID）
const myTable = $('#dataTable').DataTable();

// 绑定添加按钮的点击事件，注意不要嵌套绑定！
$('#addRow').on('click', function() {
  // 处理你的进度按钮动画（如果需要保留这个逻辑的话）
  $('.progress-button .progress-circle').svgDraw(0);

  // 准备新行的数据源（换成你实际需要的数据）
  const rowData = ['用户新增数据1', '用户新增数据2', '用户新增数据3'];

  // 用DataTables API添加行，获取行对象
  const newRow = myTable.row.add(rowData);

  // 获取行对应的DOM节点，设置唯一行ID（这里用时间戳生成，也可以用自增序号）
  const rowDom = newRow.node();
  const uniqueRowId = 'custom-row-' + Date.now();
  $(rowDom).attr('id', uniqueRowId);

  // 必须调用draw()刷新表格，让新行和ID生效
  myTable.draw();
});

// 绑定行点击事件，测试ID是否正常获取
$('#dataTable').on('click', 'tr', function() {
  const currentRowId = $(this).attr('id');
  alert(`当前行ID：${currentRowId}`);
});

关键注意点 #

• 不要嵌套绑定事件：你原来的代码里在#addRow的点击事件里又绑了.progress-button的点击，这会导致重复绑定，每次点添加按钮都会多绑定一次，逻辑彻底混乱，一定要避免这种写法。
• 用DataTables API操作行：直接通过row.add()返回的行对象获取DOM节点，再设置ID，这是官方推荐的方式，能保证DataTables的内部状态和DOM一致，不会出现设置了ID但被DataTables覆盖的情况。
• 必须调用draw()：添加行后一定要调用table.draw()，否则新行不会显示，设置的ID也不会生效。

如果你习惯用HTML字符串来构造行，也可以直接在字符串里指定ID，再通过API添加：

const rowHtml = `<tr id="custom-row-${Date.now()}"><td>自定义数据</td><td>自定义内容</td></tr>`;
myTable.row.add($(rowHtml)).draw();

最后检查下你的表格结构，确保有正确的<thead>和<tbody>标签，DataTables对表格结构有要求，结构不对也可能导致行ID设置失败。

内容的提问来源于stack exchange，提问作者Carlos