JQuery: create a whole row of a table with a link except one column

Question

I have a script that can make every row of the table clickable (as a link), however I need the last column to remain untouched like this column as an edit button. Can someone help me modify the script to make it work?

Here's jQuery:

$(document).ready(function() { $('#movies tr').click(function() { var href = $(this).find("a").attr("href"); if(href) { window.location = href; } }); }); 

Here's the HTML for one line:

 <table id="movies"> <tr class='odd'> <td>1</td> <td><a href='/film.php?id=1'></a>Tintin</td> <td>Tintin and Captain Haddock set off on a treasure hunt for a sunken ship.</td> <td><a href='/edit.php?id=1'>edit</a></td> </tr> ..... 

Answer 1

you need to take one step deeper and control the tr elements, attach a click handler to every td that is not the last in tr :

 $(document).ready(function() { $('#movies tr').each(function(i,e) { $(e).children('td:not(:last)').click(function() { //here we are working on a td element, that why we need //to refer to its parent (tr) in order to find the <a> element var href = $(this).closest("tr").find("a").attr("href"); if(href) { window.location = href; } }); }); }); 

Answer 2

you can use event.stopImmediatePropagation() in the last col button event handler.

 $('#movies tr').click(function () { var href = $(this).find("a").attr("href"); if(href) window.location = href; }); $('#movies input:button').click(function (e) { // button stuff e.stopImmediatePropagation(); }); 

the advantage (or inconvenient) is that you can click on the button in the last cell. (in the retreat of the field). I can be inconvenient, since the skip click button will open the linked page and surprise the user.

Another alternative would be to use only one event handler, which solves the action with event.which. This is my favorite method as it limits the number of event handlers. use delegate for the same reason. One table handler instead of one row.

 $('#movies').delegate('tr', 'click', function (e) { if ( $(e.target).is('input:button') ) { // button stuff } else { var href = $(this).find("a").attr("href"); if(href) window.location = href; } }); 

Answer 3

try it

 $(document).ready(function() { $('#movies tr:not('.odd')').click(function() { var href = $(this).find("a").attr("href"); if(href) { window.location = href; } }); }); 

Answer 4

I suggest instead using <td> paddinng for 0 with a specific class or simliar and have <a> tags inside be display: block so that the browser just clicks on the <a> -tag on the whole <td> .

The advantage is that your browser can handle links much better and, for example, open the link in a new window, if necessary.

This may not suit your decision, but you should think about such cases.

Answer 5

 $('tr').each(function () { $(this).children('td:not(:first)').click(function () { window.location = $(this).closest('tr').data('href'); return false; }); }); 

Answer 6

Let me post another example of selecting / deselecting rows in DataTables by clicking on any other than a specific column.

 $('#my_table_id tbody').on( 'click', 'td:not(.prohibited_td_class)', function() { $(this).closest("tr").toggleClass('selected'); // If you are also using DataTables, see which rows you've selected. alert(""+table.rows('.selected').toJQuery()[0]); });