本文讲解如何在html表格中，通过点击某一行的按钮，准确获取该行前一列单元格的文本内容，重点解析dom遍历路径及常见错误原因，并提供健壮、可复用的javascript实现方案。
在实际开发中（尤其是ASP.NET MVC等服务端渲染场景），常需为表格每行添加操作按钮（如“Add”、“Edit”），并基于当前行其他列的数据触发逻辑。但初学者常误用 previousSibling（返回文本节点或换行符，非元素节点），导致获取值为 undefined。
✅ 正确的DOM遍历路径
按钮（<button>）位于 <td> 内，该 <td> 又是 <tr> 的子元素。要访问同一行中前一列的 <td>，需按以下层级向上再向左定位：
- btn.parentElement → 获取包裹按钮的 <div class="btn-group-sm">
- btn.parentElement.parentElement → 获取该 <div> 的父元素，即当前操作所在的 <td>
- .previousElementSibling → 获取该 <td> 的前一个同级 <td> 元素（即目标列）
因此，修正后的 JavaScript 如下：
function addArticle(btn) {
// 安全获取前一列单元格（Quantity列）
const quantityCell = btn.parentElement.parentElement.previousElementSibling;
if (quantityCell) {
const value = quantityCell.textContent.trim(); // 推荐用 textContent 而非 innerHTML（避免HTML标签干扰）
alert(`Quantity: ${value}`);
// ✅ 此处可进一步调用 AJAX、跳转或表单提交等逻辑
} else {
console.warn("Target cell not found — check table structure.");
}
}⚠️ 注意事项与最佳实践
- 避免 previousSibling：它可能返回空白文本节点（如换行、缩进），应始终使用 previousElementSibling（仅匹配元素节点）。
- 增强健壮性：添加 if (quantityCell) 判断，防止 DOM 结构变动导致脚本崩溃。
-
语义化更优方案（推荐）：为关键数据列添加 data-* 属性，解耦结构依赖：
<td data-quantity="@item.Quantity">@Html.DisplayFor(modelItem => item.Quantity)</td>
对应 JS：
function addArticle(btn) { const row = btn.closest('tr'); const quantity = row.querySelector('[data-quantity]').dataset.quantity; alert(`Quantity: ${quantity}`); } -
现代替代写法（无需内联 onclick）：使用事件委托，提升性能与可维护性：
document.addEventListener('click', function(e) { if (e.target.classList.contains('btn-add-article')) { const quantity = e.target.closest('tr') .querySelector('td:nth-child(3)') // 假设 Quantity 是第3列 ?.textContent?.trim(); console.log("Add article with quantity:", quantity); } });并将按钮改为：
<button class="btn btn-primary btn-add-article">Add</button>
掌握 DOM 元素关系与合理使用 closest() / previousElementSibling / querySelector()，可高效、安全地实现行级数据交互，大幅提升前端逻辑的稳定性与可读性。
