NodeJS：表格<td>元素设置href属性点击无响应问题求助

嘿，问题出在HTML的基础规则上——<td>元素本身不支持href属性哦！这就是为什么你点击它完全没反应的原因，只有<a>标签才自带跳转功能哒。下面给你两种可行的解决办法：

方法一：用<a>标签包裹内容（推荐，符合HTML语义） #

这是最标准的做法，既符合HTML规范，也对搜索引擎和辅助设备更友好：

<tr class="students">
  <td><%=it%></td>
  <td class="rollNo">
    <!-- 让a标签占满整个td，点击整个单元格都能跳转 -->
    <a href="/documents/getDocs" style="display: block; width: 100%; height: 100%;"><%=stud %></a>
  </td>
  <td><%=classroom.studentNames[stud]%></td>
</tr>

如果不需要整个单元格可点击，去掉style属性即可，只点击文字部分跳转。

方法二：用JavaScript处理点击事件 #

如果因为某些原因不想用<a>标签，可以通过JS绑定点击事件实现跳转：

内联事件写法（快速简单） #

<tr class="students">
  <td><%=it%></td>
  <td class="rollNo" onclick="window.location.href='/documents/getDocs'" style="cursor: pointer;"><%=stud %></td>
  <td><%=classroom.studentNames[stud]%></td>
</tr>

分离式写法（更优雅，便于维护） #

<tr class="students">
  <td><%=it%></td>
  <td class="rollNo" data-href="/documents/getDocs"><%=stud %></td>
  <td><%=classroom.studentNames[stud]%></td>
</tr>

<script>
// 给所有rollNo类的td绑定点击事件
document.querySelectorAll('.rollNo').forEach(td => {
  td.addEventListener('click', function() {
    window.location.href = this.dataset.href;
  });
});
</script>

<style>
/* 加上鼠标指针样式，提示用户可点击 */
.rollNo {
  cursor: pointer;
}
</style>

总结 #

优先推荐方法一，因为它完全符合HTML语义，不需要额外的JS或CSS，是最稳妥的解决方案。

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