Reputation: 2940
I'm creating a haml table like so:
%tbody
- @records.each do |br|
%tr
%td.name
= br.full_name
%td.address
= br.address
I would like to create a link from the entire tr
to another page. How can I do this?
Upvotes: 1
Views: 5788
Reputation: 59607
Here's how I did it in Rails 4.0.2. My controller's name is order
.
Assign an id to your table so you can identify it via CSS later; I used the id orders
.
For each table row that contains a data cell, add the "data-link" attribute to it with the value of the link (in my case it looks like /orders/1
and so on).
app/views/orders/index.html.haml
%table#orders
%tr
%th ...
.
.
.
- @orders.each do |order|
%tr{"data-link" => order_path(order)}
%td= ...
.
.
.
In your JavaScript file (or CoffeeScript file as shown here), create the links for the table rows that have the "data-link" attribute with their respective "data-link" values.
app/assets/javascripts/order.js.coffee
$ ->
$("tr[data-link]").click ->
window.location = @dataset.link
In the stylesheet for your controller, make the cursor change into a pointer when hovering over the rows to indicate that they are clickable.
app/assets/stylesheets/order.css.scss
#orders tr[data-link] {
cursor: pointer;
}
Upvotes: 0
Reputation: 30434
Because nesting any block level element inside an <a>
tag is illegal. I would do it using jQuery.
%tr{"data-link" => url_for(:action => 'show', :id => br.id)}
%td.name
= br.full_name
%td.address
= br.address
Then, at the end of the table:
:javascript
$("tr[data-link]").click(function() {
window.location = this.data("link")
})
You should also include a stylesheet that changes the mouse cursor to a pointer.
:stylesheet
#yourtable tr
cursor: pointer;
Upvotes: 4
Reputation: 8892
You should be able to pass the row as a block to link_to
:
link_to(url, html_options = {}) do
#row
end
EDIT:
- link_to(url, html_options = {}) do
%tr
%td.name
= br.full_name
%td.address
= br.address
EDIT BY OP: this ended up working:
%tr
%td.name
= link_to(br.full_name, html_options = {:action => 'show', :id => br.id})
Upvotes: 1