Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make tr clickable over link_to [duplicate]

I want to make <tr> clickable with code like this:

<tr <%= link_to 'Show', show_account_employees_path(account), :remote => true %>>

I found solution only for direct link without remote.

Thanks for help!

like image 689
yaartem Avatar asked Aug 04 '14 18:08

yaartem


People also ask

How do I make my whole tr clickable?

Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.

How do I make a table tr clickable?

You can use onclick javascript method in tr and make it clickable, also if you need to build your link due to some details you can declare a function in javascript and call it in onclick, passing some values.

How do I make a row clickable?

To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content.

How do you make a row clickable in Javascript?

If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar.


1 Answers

Referring to your comment I need all row be clickable

You can't have a tr inside an anchor tag. It's invalid HTML to have any elements other than thead,tbody as a direct child of a table. You'll have to place your anchor tag inside a td or th to be valid.

FIX

If you want entire row to be clickable then you'll have to use js magic, you can do something like:

Use HTML5 data-attribute to get your link value

<tr data-href= "<%= show_account_employees_path(account) %>">
  <td></td>
</tr>

Don't know what exactly you are trying to accomplish by making an ajax request to show an employee but since you want it so you can make it an ajax request using jquery's ajax method

$(document).on("click", "#table-id tr", function() {
  var link  = $(this).data("href")
  $.ajax({
    url: link,
    type: "GET"
  });
});
like image 181
Mandeep Avatar answered Sep 28 '22 17:09

Mandeep