如何在jQuery DataTable中修改当前点击的编辑按钮的HTML内容

我来帮你搞定这个问题，其实思路非常直接——你已经能通过$(this)获取到当前点击的按钮了，只要直接替换这个元素的整个HTML结构就行，不用绕到DataTable的行数据或者其他复杂方法里。

修改后的完整代码 #

$(function () {
  var mytable = $("#datatable").DataTable({
    "ajax": {"url": "", dataSrc: "data"},
    "columns": [
      { "data": "val_2" },
      { "data": "val_1" }
    ],
    "columnDefs": [
      { 
        "targets": 2, 
        "render": function ( data, type, full, meta ) {
          return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
        },
      },
    ]
  });

  $('#datatable tbody').on('click', 'button.edit', function () {
    // 获取行数据（你已经实现的部分）
    var data = mytable.row($(this).parents('tr')).data();
    
    // 构造你想要的新按钮HTML结构，这里示例改成"保存"按钮
    var newButtonHtml = `
      <button type="button" class="save btn btn-success btn-sm" data-subid="${data.id}">
        <i class="fa fa-save"> Save</i>
      </button>
    `;
    
    // 替换当前点击的按钮元素
    $(this).replaceWith(newButtonHtml);
  });
});

关键步骤解释 #

1. 精准定位当前按钮：在点击事件的回调函数里，$(this)就是你刚刚点击的那个.edit按钮，这是最核心的切入点，确保你只修改当前行的目标按钮。
2. 构造新按钮结构：用ES6模板字符串（反引号``）来编写新按钮的HTML，既清晰又方便插入行数据里的id值（比如data.id），你可以根据需求修改类名、图标、文本内容。
3. 替换原按钮：使用replaceWith()方法直接把原按钮元素替换成新的HTML结构，这样按钮的所有属性（class、data-subid）、内部图标和文本都会被完全替换，完全满足你的需求。

补充注意事项 #

• 如果替换后的新按钮（比如示例中的.save按钮）需要绑定点击事件，一定要用事件委托的方式，因为新按钮是动态生成的，原有的直接绑定不会生效：

  // 给动态生成的.save按钮绑定事件
  $('#datatable tbody').on('click', 'button.save', function() {
    // 这里写保存逻辑，同样可以用$(this)获取当前按钮，用mytable.row()获取行数据
    var rowData = mytable.row($(this).parents('tr')).data();
    console.log('保存数据:', rowData);
  });
  

• 建议去掉原来的.off('click')，因为它会移除tbody上所有的点击事件委托，可能影响其他元素的交互，直接分别绑定不同按钮的事件更安全。

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