如何在script标签中访问EJS变量？实现表格行编辑功能

核心思路 #

不用在前端脚本里强行访问EJS的index变量，直接给编辑按钮添加自定义data属性存储对应行的标识（比如行的序号或业务唯一ID），点击按钮时通过这个标识定位目标行，再遍历行内所有<td>开启可编辑状态。

具体实现代码 #

EJS模板中的表格结构 #

<table>
  <% items.forEach((item, index) => { %>
    <tr id="table-row-<%= index %>">
      <td><%= item.username %></td>
      <td><%= item.email %></td>
      <td>
        <!-- 给按钮绑定当前行的index到data属性 -->
        <button class="edit-btn" data-target-index="<%= index %>">编辑</button>
      </td>
    </tr>
  <% }) %>
</table>

前端交互脚本 #

// 批量绑定所有编辑按钮的点击事件
document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过按钮的data属性获取目标行的ID
    const targetRowId = `table-row-${this.dataset.targetIndex}`;
    const targetRow = document.getElementById(targetRowId);
    
    // 遍历行内所有td，开启可编辑
    targetRow.querySelectorAll('td').forEach(td => {
      td.contentEditable = true;
      // 可选：给可编辑单元格加样式提示
      td.style.backgroundColor = '#f5f5f5';
    });
  });
});

更健壮的优化方案 #

如果表格数据有业务唯一ID（比如数据库主键），建议用业务ID代替index作为行标识，避免分页、数据排序后序号混乱：

<tr id="table-row-<%= item.id %>">
  <td><%= item.username %></td>
  <td><%= item.email %></td>
  <td>
    <button class="edit-btn" data-target-id="<%= item.id %>">编辑</button>
  </td>
</tr>

对应脚本调整：

const targetRowId = `table-row-${this.dataset.targetId}`;

这种方式彻底避开了脚本访问EJS变量的问题，逻辑清晰且兼容性强。

内容的提问来源于stack exchange，提问作者ether