本文介绍在动态生成的 HTML 表格中，当用户点击“保存”按钮时，如何通过 jQuery 精准获取当前行的 ref_id 和 teacher_feedback 值，避免因 DOM 结构误判导致的 undefined 问题。

本文介绍在动态生成的 html 表格中，当用户点击“保存”按钮时，如何通过 jquery 精准获取当前行的 `ref_id` 和 `teacher_feedback` 值，避免因 dom 结构误判导致的 `undefined` 问题。

在实际开发中，我们常需对表格中某一行进行批量操作（如提交反馈、更新评分）。上述模板代码通过 Twig 循环渲染多行

，每行包含序号、用户信息、答题数、评分下拉框、教师反馈文本域及操作按钮（含 href 链接和 .submit_paper 按钮）。关键挑战在于：点击 .submit_paper 时，必须准确提取本行独有的 ref_id 和 teacher_feedback。

直接使用 $(this).closest('td') 会返回

元素本身，而非其内部数据，因此 console.log(paper_ref) 显示为 DOM 对象（非 undefined），但若后续未正确向上/向下遍历，则极易误取值——这正是初学者常见误区。

✅ 正确做法是：以当前按钮为锚点，精准定位整行（tr），再分别解析目标字段：

1. 获取 ref_id：
   观察 HTML， 标签的 href 属性形如 /module/controller/result/{ref_id}。利用原生 DOM 方法 previousElementSibling 快速获取前一个兄弟元素（即 标签），再用 split('/').pop() 提取 URL 最后一段：

   var ref_url = this.previousElementSibling.href;
   var ref_id = ref_url.split('/').pop(); // 如 "abc123"

2. 获取 teacher_feedback：
   利用 jQuery 的 closest('tr') 向上找到整行，再用 find('textarea') 定位该行唯一的 ，最后调用 .val() 获取用户输入内容：

   var teacher_feedback = $(this).closest('tr').find('textarea').val();

⚠️ 注意事项：

• 避免 ID 冲突：模板中 使用了固定 ID，而循环生成多行会导致多个同名 ID，违反 HTML 规范。应改为 id="w3review_{{ user_paper.ref_id }}" 或直接移除 ID，依赖结构定位（如本方案）。
• 空值防御：生产环境建议增加判空逻辑：

  var teacher_feedback = $(this).closest('tr').find('textarea').val() || '';

• 扩展性考虑：若未来需获取更多字段（如评分值），可统一用 data-* 属性增强语义化，例如在 .submit_paper 上添加 data-ref-id="{{ user_paper.ref_id }}"，但需确保服务端同步输出，而本文方案完全基于现有 DOM 结构，零侵入、高兼容。

综上，核心思想是：以事件源为起点，通过层级关系（closest, find, previousElementSibling）构建稳定的选择路径，而非依赖易变的 ID 或错误的就近定位。此模式适用于所有动态表格的行级数据采集场景。