Ruby-on-rails 在 Rails 中将表格行变成链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9945620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a table row into a link in Rails
提问by jhamm
I am trying to make a row in a table link to the edit page. I know the links are being created, because I can print them out. I am close, but am missing something important. What do I change to make the link work properly?
我正在尝试在指向编辑页面的表格链接中创建一行。我知道正在创建链接，因为我可以将它们打印出来。我很接近，但我错过了一些重要的东西。我要更改什么才能使链接正常工作？
<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>
回答by Ryan Bigg
As Robin said, that's invalid HTML. You probably shouldn't do that.
正如罗宾所说，这是无效的 HTML。你可能不应该这样做。
I personally would put an onclickevent on the trusing jQuery. The trelement would look like this:
我个人会onclick在trusing jQuery上放置一个事件。该tr元素将如下所示：
<tr data-link="<%= edit_scout_path(scout) %>">
...
</tr>
And then the associated JavaScript (placed in a file such as app/assets/javascripts/scouts.js) would be something like this:
然后关联的 JavaScript（放置在诸如 的文件中app/assets/javascripts/scouts.js）将是这样的：
$("tr[data-link]").click(function() {
window.location = $(this).data("link")
})
This would make all trelements that have a data-linkattribute act as if they were URLs in the most unobtrusive way I can think possible.
这将使所有tr具有data-link属性的元素以我认为可能的最不显眼的方式充当 URL。
回答by Pradeep Agrawal
I am new on rails and I have the same problem and use the Ryan's advise with some changes that are following -
我是 Rails 的新手，我遇到了同样的问题，并使用 Ryan 的建议进行了一些更改 -
$("tr").click(function() {
window.location = $(this).data("link")
})
$("tr").click(function() {
window.location = $(this).data("link")
})
You have to use $(this).
你必须使用 $(this)。
回答by Jean-Hugues Guinot
Here is my take to make those links, remote: true
这是我制作这些链接的方法， remote: true
$("tr[data-link]").click(function () {
$.ajax({
url: this.getAttribute('data-link'),
dataType: "script",
type: "GET"
});
event.preventDefault();
});
回答by BKSpurgeon
Simple Solution: add a link into a table cell:
简单的解决方案：在表格单元格中添加链接：
This doesn't answer your question, but it provides a solution to the problem you are likely really after: just add an edit link into a cell, rather than on the table row because having a link on the table row itself may lead to expected results for users. If they are clicking on it, they might not want to be led to an edit link.
这不能回答您的问题，但它提供了您可能真正关心的问题的解决方案：只需将编辑链接添加到单元格中，而不是在表格行上，因为在表格行本身上有一个链接可能会导致预期用户的结果。如果他们点击它，他们可能不希望被引导到编辑链接。
Like my grandpa used to say: KISS - Keep It Simple Stupid
就像我爷爷曾经说过的那样：KISS - Keep It Simple Stupid
<% @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>
