Question

我试图渲染一个表，其列是subreddit标题，并且链接到每个subreddit。但是，这不会生成链接。我想让整行成为一个链接，而不是一个特定的单元格。问题是什么？

    <% @subreddits.each do |subreddit| %>
      <tr>
        <%= link_to subreddit do %>
          <td><%= something else %></td>
          <td><%= subreddit.title %></td>
        <% end %>
      </tr>
    <% end %>

Answer 1

您正在将链接包裹在<td>元素中。将<td>包裹在链接周围。

<% @subreddits.each do |subreddit| %>
  <tr>
    <td>
      <%= link_to(subreddit.title, subreddit) %>
    </td>
  </tr>
<% end %>

如果您想要将整个 <td>链接起来，那么您必须使用上面的代码 plus ，如下所示：< / p>

https://stackoverflow.com/a/6459846/2456549

<强>更新

您似乎更新了问题以添加其他<td>。看起来您现在想要将<tr>链接起来。实现这一目标的最佳方法可能就是使用JavaScript。请参阅以下链接以获取解决方案。我也会添加CSS，因此<tr>有一个尖头光标，以改善用户体验。

how to make a whole row in a table clickable as a link?

我已经开始在这里添加了完整的解决方案，而不需要像jQuery这样的依赖，授予它，它是用ES6编写的，所以如果你需要将const更改为var 。请注意，它尚未经过测试。

# ERB
<tr class="cursor-pointer"
  data-behavior="clickable-row"
  data-url="<%= subreddit_url(subreddit) %>">
  <td><%= something else %></td>
  <td><%= subreddit.title %></td>
</tr>

# javascript
const clickableRows = document.querySelectorAll('[data-behavior=clickable-row]');

clickableRows.addEventListener('click', event => {
  window.location = event.currentTarget.dataset.url;
});

# css
.cursor-pointer { cursor: pointer; }

link_to阻塞每个do循环内部不起作用

1 个答案: