如何使用纯JavaScript获取HTML表格选中行首单元格的值

你现有代码无法正确获取目标行ID的核心问题有2个：

• 事件绑定函数名不匹配：给按钮绑定的点击回调是viewrow(this)，但你实际写的取值处理函数叫deleterow，点击时根本触发不到你写的取值逻辑
• 取值范围错误：直接在整个tbody节点下查询td，querySelector默认只会返回范围内第一个匹配的元素，和你当前点击的按钮所在行没有关联，自然只能拿到第一行的首列值

1. 修正按钮生成的事件绑定逻辑 #

不要给事件属性传字符串，直接绑定函数引用，同时统一回调函数名：

let tr = document.querySelectorAll("table tbody tr");

Array.from(tr).forEach(function (trArray) {
    let button = document.createElement("i");
    let td = document.createElement("td");
    button.className = "fa fa-eye";
    button.style.color = "black";
    button.hidden = "hidden";
    // 修正鼠标悬浮事件写法
    button.onmouseover = function () {
        this.style.cursor = 'pointer';
    }
    // 绑定正确的回调函数，传入当前按钮元素作为参数
    button.onclick = function () {
        deleterow(this);
    }
    td.append(button);
    trArray.append(td);
});

2. 重写行取值逻辑 #

从点击的按钮元素出发，向上定位到当前所属的表格行，再在当前行范围内查询首列的ID值即可：

function deleterow(element) {
    // 向上查找最近的tr父节点，也就是按钮所在的当前行
    const currentRow = element.closest("tr");
    // 在当前行范围内查询第一个td，去除首尾空白后拿到contract_id
    const contractId = currentRow.querySelector("td:first-child").innerText.trim();
    
    const hiddentext2 = document.getElementById("myrow_id");
    hiddentext2.focus();
    hiddentext2.value = contractId;
    hiddentext2.blur();

    // 如果需要做前端删除行操作，直接调用 currentRow.remove() 即可
}

你后端C#拼接HTML时，所有标签属性值都需要用引号包裹，现有写法拼接出的HTML属性没有引号，遇到特殊字符、空格时很容易出现结构错乱，比如表格标签拼接可以改成：

sb.Append("<table id='contractstable' runat='server' class='table'>");

所有td的data-label属性也按同样规则补全引号，避免DOM结构异常。

内容的提问来源于stack exchange，提问作者Salim Al-Tarsha