Rails使用link_to实现表格整行可点击失效，求解决方法

你的代码无法触发点击的核心原因是HTML规范不允许<a>标签作为<tr>的直接子元素。浏览器会自动修正不符合规范的DOM结构，把<a>从<tr>内部移到外部，导致原本包裹的<td>不再属于链接区域，自然无法触发跳转。

下面提供两种可行的解决方案：

方案1：纯HTML/CSS实现（无需JavaScript） #

给每个<td>内部单独添加link_to，再用CSS让链接占满整个单元格，视觉上呈现整行可点击的效果：

ERB代码 #

<% @courses.each do |course|%>
  <tr class="clickable-row">
    <td class="name"><%= link_to course.activity.name, managers_course_path(course) %></td>
    <td class="day"><%= link_to course.starts_at.strftime("%A %e %B"), managers_course_path(course) %></td>
    <td class="start"><%= link_to course.starts_at.strftime("%H:%M"), managers_course_path(course) %></td>
    <td class="end"><%= link_to course.ends_at.strftime("%H:%M"), managers_course_path(course) %></td>
  </tr>
<% end %>

CSS样式 #

.clickable-row td {
  padding: 0.5rem; /* 保持单元格内边距，可按需调整 */
}

.clickable-row a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5rem; /* 和单元格内边距对应，避免内容偏移 */
  text-decoration: none;
  color: inherit; /* 继承父元素文字颜色，保持原有样式 */
}

.clickable-row:hover {
  background-color: #f8f9fa; /* 可选：hover时添加背景色，提示可点击 */
}

方案2：JavaScript实现（更简洁） #

给<tr>添加存储跳转路径的data属性，通过监听行的点击事件实现跳转，无需重复写link_to：

ERB代码 #

<% @courses.each do |course|%>
  <tr data-path="<%= managers_course_path(course) %>" class="clickable-row">
    <td class="name"><%= course.activity.name %></td>
    <td class="day"><%= course.starts_at.strftime("%A %e %B") %></td>
    <td class="start"><%= course.starts_at.strftime("%H:%M") %></td>
    <td class="end"><%= course.ends_at.strftime("%H:%M") %></td>
  </tr>
<% end %>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.clickable-row').forEach(row => {
    row.style.cursor = 'pointer'; // 提示可点击
    row.addEventListener('click', (e) => {
      // 可选：如果行内有按钮等可交互元素，点击时不跳转
      if (!e.target.closest('button, a')) {
        window.location.href = row.dataset.path;
      }
    });
  });
});

补充说明 #

这个方案代码更简洁，整行任何位置都能触发跳转。如果行内有其他可点击元素（比如编辑按钮），可以通过判断点击目标避免冲突。

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