如何通过点击按钮获取同一行前一列的表格单元格值

本文介绍在html表格中，当用户点击某行的按钮时，如何使用javascript精准获取该行前一列单元格（如商品名称、分类名等）的文本内容，并提供可靠、可复用的dom遍历方案。

在ASP.NET MVC（或类似服务端渲染场景）中，常需为每行数据添加操作按钮（如“Add”），并期望点击时读取同级其他列的值（例如获取当前行的 CategoryName 或 Name）。初学者常误用 previousSibling，但该属性返回的是文本节点或注释节点（如换行符、空格），而非元素节点，因此直接调用 .innerHTML 会返回 undefined。

正确做法是通过 parentElement 链式向上定位，再结合 previousElementSibling 获取相邻的

元素：

function addArticle(btn) {
    // btn → .btn-primary 按钮本身
    // btn.parentElement → 
    // btn.parentElement.parentElement → （按钮所在单元格）
    // btn.parentElement.parentElement.previousElementSibling → 前一列的 
    const targetCell = btn.parentElement.parentElement.previousElementSibling;
    const cellValue = targetCell ? targetCell.textContent.trim() : '';
    alert(cellValue); // 例如：显示 "Electronics" 或 "Laptop"
}

✅

关键要点说明：

• 使用 previousElementSibling（而非 previousSibling）确保只匹配元素节点，跳过空白文本节点；
• textContent.trim() 比 innerHTML 更安全：避免意外获取 HTML 标签，且自动去除前后空格/换行；
• 链式调用 parentElement.parentElement 是标准 DOM 路径，清晰反映结构层级（按钮 → 按钮容器 div → 表格单元格 td → 前一单元格 td）；
• 建议添加空值校验（如 targetCell ? ... : ''），提升代码健壮性。

? 进阶建议（推荐）：
为避免强依赖 DOM 结构，更优雅的方式是在

上绑定数据属性，或为每个按钮添加 data-* 属性：

    Add

对应 JS 即可直接读取：

function addArticle(btn) {
    const categoryName = btn.dataset.category;
    const name = btn.dataset.name;
    console.log(`Adding: ${categoryName} - ${name}`);
}

这种方式解耦 DOM 结构，便于后续维护与测试，尤其适用于动态渲染或复杂嵌套场景。