前端怎么获得表格多选的id 代码演示

感谢您的提问。关于表格多选的id，具体代码实现可能因项目而异，但一般可以通过以下步骤获取选中行的ID：

1. 给每个表格行添加一个checkbox，设置value为该行数据的ID。
2. 监听多选框的change事件，判断哪些checkbox选中并获取他们的value。
3. 将选中行的ID保存到一个数组中，便于后续处理。

对于如何获取ID的具体代码实现，可以参考以下示例：

HTML代码：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all"></th>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="row-checkbox" value="1"></td>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="row-checkbox" value="2"></td>
      <td>2</td>
      <td>Jane</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取表格中选中行的ID数组
function getSelectedRows() {
  const checkboxList = document.querySelectorAll('.row-checkbox');
  const selectedRows = [];
  for (let i = 0; i < checkboxList.length; i++) {
    if (checkboxList[i].checked) {
      selectedRows.push(checkboxList[i].value);
    }
  }
  return selectedRows;
}

// 监听全选框改变事件
document.querySelector('#select-all').addEventListener('change', function(event) {
  const isChecked = event.target.checked;
  const checkboxList = document.querySelectorAll('.row-checkbox');
  for (let i = 0; i < checkboxList.length; i++) {
    checkboxList[i].checked = isChecked;
  }
});

// 监听多选框改变事件
document.querySelector('tbody').addEventListener('change', function(event) {
  const isSelected = event.target.checked;
  const rowCheckbox = event.target.closest('.row-checkbox');
  if (rowCheckbox) {
    const checkedCount = document.querySelectorAll('.row-checkbox:checked').length;
    document.querySelector('#select-all').checked = checkedCount === document.querySelectorAll('.row-checkbox').length;
  }
});

// 使用示例
const selectedRows = getSelectedRows();
console.log(selectedRows);

希望可以帮到您，如有疑问请随时追问。