Question

我正在尝试在表格链接到编辑页面。我知道链接正在创建，因为我可以将它们打印出来。我很接近，但我错过了一些重要的事情。如何更改以使链接正常工作？

<h1>Scouts</h1>
<p><%= button_to "Add a new Scout", new_scout_path, :method => :get %></p>
<div class="message-board">
  <table>
    <tr>
      <th>Name</th>
      <th>Rank</th>
      <th>Advancement Date</th>
      <th>Age</th>
    </tr>  

<% @scouts.each do |scout| %>
    <tr <% link_to edit_scout_path(scout) %> >
      <td><%= scout.name %></td>
      <td><%= scout.rank %></td>
      <td><%= scout.advancement %></td>
      <td><%= scout.age %></td>
    </tr>
<% end %>
  </table>
</div>

Answer 1

正如罗宾所说，这是无效的HTML。你可能不应该这样做。

我个人会使用jQuery在onclick上放置一个tr事件。 tr元素如下所示：

<tr data-link="<%= edit_scout_path(scout) %>">
   ...
</tr>

然后关联的JavaScript（放在app/assets/javascripts/scouts.js等文件中）将是这样的：

$("tr[data-link]").click(function() {
  window.location = $(this).data("link")
})

这会使具有tr属性的所有data-link元素的行为就像我们认为可行的最不引人注目的方式一样。

Answer 2

我是新手，我遇到同样的问题，并使用Ryan的建议进行一些更改 -

$("tr").click(function() { window.location = $(this).data("link") })

你必须使用$（this）。

Answer 3

在这里，我要建立这些链接，remote: true

$("tr[data-link]").click(function () {
    $.ajax({
        url: this.getAttribute('data-link'),
        dataType: "script",
        type: "GET"
    });
    event.preventDefault();
});

Answer 4

简单的解决方案：将链接添加到表格单元格中：

这不能回答您的问题，但是它为您可能真正遇到的问题提供了解决方案：只需将编辑链接添加到单元格中，而不是在表行中，因为在表行本身上可能有一个链接为用户带来预期的结果。如果他们单击它，则可能不希望将他们引导至编辑链接。

就像我的爷爷曾经说过的：吻-保持简单愚蠢

    <% @scouts.each do |scout| %>
        <tr>
         <!-- Simply edit the scout -->
          <td> <%= link_to edit_scout_path(scout), "Edit Scout" %> </td>      
          <td><%= scout.name %></td>
          <td><%= scout.rank %></td>
          <td><%= scout.advancement %></td>
          <td><%= scout.age %></td>
        </tr>

Answer 5

对于使用Bootstrap 4或更高版本的任何人，只需将此类添加到img标签

rounded-circle

我发现了解决方法here

将表行放入Rails中的链接

5 个答案:

简单的解决方案：将链接添加到表格单元格中：