点击Bootstrap table-striped表格删除按钮如何获取对应行的td值

云上老周

2026-10-12

解决方案

你现有代码的核心问题是点击删除按钮时没有暂存当前行的关联数据，导致确认删除的回调中无法定位到目标行，可按以下步骤修改：

1. 修正HTML部分属性

首先修正删除按钮的两处错误：

删除按钮的data-target属性值和实际模态框id不一致，改为data-target="#confirmaExclusao"
给弹窗触发函数传入当前按钮实例，方便定位行
修改后的删除按钮代码：

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmaExclusao" onClick="modalAvisoExclusao(this);">
  <i class='glyphicon glyphicon-trash'></i> Excluir
</button>

2. 修改JS逻辑

第一步：初始化DataTable并暂存行数据

// 页面DOM加载完成后初始化DataTable
$(function() {
  window.dataTable = $('#Lista').DataTable();
})

function modalAvisoExclusao(btn) {
  // 定位当前点击按钮所属的行
  const $targetTr = $(btn).closest('tr');
  // 读取当前行的所有td数据，数组顺序和表头列顺序一一对应
  const rowData = dataTable.row($targetTr).data();
  // 将行数据暂存到模态框的自定义属性中，确认删除时读取
  $('#confirmaExclusao').data({
    rowData: rowData,
    targetTr: $targetTr
  }).modal('show');
}

第二步：确认删除时读取行数据

function excluirUO() {
  const $modal = $('#confirmaExclusao');
  // 读取之前暂存的行数据
  const rowData = $modal.data('rowData');
  const $targetTr = $modal.data('targetTr');

  // 按列索引获取对应td的值，索引从0开始，对应第一列Name，依次类推
  console.log('待删除的用户名：', rowData[0]);
  console.log('待删除的职位：', rowData[1]);
  console.log('待删除的办公地点：', rowData[2]);

  // 如果需要同步删除表格中的该行，执行下面的代码
  dataTable.row($targetTr).remove().draw();

  $modal.modal('hide');
}