Haml与Rails：将表格列变成链接

Question

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?

Answer 1

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;

Answer 2

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})

Answer 3

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;
}