解决MDB Datatable中点击任意行仅为第一行添加active类的问题

你遇到的核心问题是：在rowClick.mdb.datatable事件中，你通过event.target.querySelector("tbody tr")总是选中了表格的第一行，而非实际点击的目标行。MDB Datatable的rowClick事件已经把点击行的完整信息封装在事件对象里了，我们可以直接利用这个来精准定位目标行。

另外，建议你补充单选/多选的状态管理逻辑，避免出现多行重复高亮或者类名重复叠加的情况。

修正后的代码 #

// 行选中函数
const table = document.getElementById('datatable');
// 记录上一次选中的行，用于单选时取消旧选中状态
let prevActiveRow = null;
// 你的选中ID数组
const activeT = [];

table.addEventListener('rowClick.mdb.datatable', (e) => {
  // 获取当前点击的行DOM元素（MDB事件自带的精准行节点）
  const currentRow = e.row.element;
  const selected_item_id = e.row.id;

  // --- 单选逻辑（如需多选可删除这段）---
  if (prevActiveRow) {
    prevActiveRow.classList.remove('active');
    // 同步移除数组里的旧ID
    const oldIdIndex = activeT.indexOf(prevActiveRow.dataset.mdbId);
    if (oldIdIndex !== -1) activeT.splice(oldIdIndex, 1);
  }
  // --- 单选逻辑结束 ---

  // 切换当前行的active类（多选场景下可用toggle替代add）
  currentRow.classList.add('active');
  // 更新记录的选中行
  prevActiveRow = currentRow;

  // 同步更新选中ID数组（多选场景下需判断是否已存在）
  activeT.push(selected_item_id);
});

关键优化点说明 #

1. 精准获取点击行：使用e.row.element直接拿到当前点击的<tr>节点，这是MDB Datatable事件提供的原生DOM元素，完全避免了通过querySelector找错行的问题。
2. 避免类名重复：用classList.add()替代直接拼接className，classList会自动忽略重复的类名，不会出现activeactive这种异常情况。
3. 状态管理：通过prevActiveRow记录上一次选中的行，单选场景下可以快速取消旧行的激活状态；如果需要多选，只需要把add改成toggle，并在数组里判断ID是否已存在即可。

这样修改后，点击任意行都会正确为目标行添加active类，不会再误操作第一行啦。

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