本文介绍在html表格中，当用户点击某行的按钮时，如何使用javascript精准获取该行前一列单元格（如商品名称、分类名等）的文本内容，并提供可靠、可复用的dom遍历方案。
在ASP.NET MVC（或类似服务端渲染场景）中，常需为每行数据添加操作按钮（如“Add”），并期望点击时读取同级其他列的值（例如获取当前行的 CategoryName 或 Name）。初学者常误用 previousSibling，但该属性返回的是文本节点或注释节点（如换行符、空格），而非元素节点，因此直接调用 .innerHTML 会返回 undefined。
正确做法是通过 parentElement 链式向上定位，再结合 previousElementSibling 获取相邻的
function addArticle(btn) {
// btn → .btn-primary 按钮本身
// btn.parentElement → <div class="btn-group-sm">
// btn.parentElement.parentElement → <td>（按钮所在单元格）
// btn.parentElement.parentElement.previousElementSibling → 前一列的 <td>
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 结构，更优雅的方式是在
<button class="btn btn-primary"
data-category="@item.Category.CategoryName"
data-name="@item.Name"
onclick="addArticle(this)">
Add
</button>对应 JS 即可直接读取：
function addArticle(btn) {
const categoryName = btn.dataset.category;
const name = btn.dataset.name;
console.log(`Adding: ${categoryName} - ${name}`);
}这种方式解耦 DOM 结构，便于后续维护与测试，尤其适用于动态渲染或复杂嵌套场景。
