如何通过Ctrl或Shift键实现HTML表格的多行选中功能

实现步骤 #

首先先修正你原代码的小错误：生成第二行数据时，你调用了row.insertCell，实际应该用你创建的第二行对象row1，否则数据会插入到表头行里。

1. 先添加选中行的CSS样式 #

tr.selected {
    background-color: #b3d9ff;
}
/* 可选：表头行禁止选中 */
tr:first-child {
    user-select: none;
}

2. 编写多选逻辑（适配动态生成行，用事件委托实现） #

直接给表格绑定点击事件，不用给每行单独绑定，后续动态新增的行也会自动支持多选：

// 记录最后一次点击的行，用于Shift范围选择
let lastSelectedRow = null;
const table = document.getElementById("emp");

// 事件委托，绑定到表格上，适配动态生成的行
table.addEventListener("click", function(e) {
    // 找到点击的行元素
    const clickedRow = e.target.closest("tr");
    if (!clickedRow) return;
    // 如果不需要选中表头，添加这段判断跳过表头行
    if (clickedRow.rowIndex === 0) return;

    const isCtrlPressed = e.ctrlKey || e.metaKey; // 兼容Mac的Command键
    const isShiftPressed = e.shiftKey;

    // 情况1：按住Ctrl键，切换当前行选中状态
    if (isCtrlPressed) {
        clickedRow.classList.toggle("selected");
        lastSelectedRow = clickedRow;
        return;
    }

    // 情况2：按住Shift键，范围选择
    if (isShiftPressed && lastSelectedRow) {
        // 获取两行的索引范围
        const start = Math.min(lastSelectedRow.rowIndex, clickedRow.rowIndex);
        const end = Math.max(lastSelectedRow.rowIndex, clickedRow.rowIndex);
        // 清空之前的选中（如果要保留之前的选中状态可以删除这行）
        Array.from(table.querySelectorAll("tr.selected")).forEach(row => row.classList.remove("selected"));
        // 选中范围内所有行
        for (let i = start; i <= end; i++) {
            if (i !== 0) table.rows[i].classList.add("selected");
        }
        return;
    }

    // 情况3：无按键按下，单选，清空所有选中只选当前行
    Array.from(table.querySelectorAll("tr.selected")).forEach(row => row.classList.remove("selected"));
    clickedRow.classList.add("selected");
    lastSelectedRow = clickedRow;
});

3. 修正后的表格生成代码参考 #

var table=document.getElementById("emp");

// 生成表头
var row=table.insertRow(0);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
cell.innerHTML="<b>Name:</b>";
cell1.innerHTML="<b>Age:</b>";
cell2.innerHTML="<b>Address:</b>";

// 生成数据行
var row1=table.insertRow(1);
// 修正原错误，这里用row1而不是row
var cell3=row1.insertCell(0);
var cell4=row1.insertCell(1);
var cell5=row1.insertCell(2);
cell3.innerHTML="Alex";
cell4.innerHTML=23;
cell5.innerHTML="Chicago";

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