Trigger jquery by clicking on table row

Question

I have a row in a table that I like to make clickable (rather than just the text in the row) so I use the following code to make it open another page:

<td onClick="document.location.href='content2.html';" style="cursor:pointer;">

However now I am using jquery with the below code to open the new page within a div rather than in a new page. How would I update my row code to open the content in the div rather than in a new page.

On the actual text I use the following:

<a class="load_link" style="cursor:pointer;">Link<a>

However, as I said above I'd like to make the whole row clickable rather than just the text.

JQuery used to update the content:

$(document).ready(function(){
     $("#content").load("content.html");
});

(function($) {  
$(function() {  
 $('.load_link').click(function() {  
   $("#content").load("content.html");  
   var $row = $(this).closest("tr");
   $row.removeClass("rownotselected").addClass("rowselected");
   $row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
   return false;   
 });  
});  
})(jQuery);

Any help would be appreciated!

Your click is loading `content.html` rather than `content2.html` - was that intentional? Also, are all links loading `content2.html` or are they loading the value from their own `href`? — Sampson, Jun 05 '11 at 20:40
I guess just moving the class load_link from to should solve the problem if I have understood your requirements correctly. And you say you want the click event on the row () but you have put in on the column () here --> — Cracker, Jun 05 '11 at 20:48

score 0 · Answer 1 · answered Dec 22 '16 at 07:58

<style>
.clickable {
  cursor: pointer;
  color:blue;
}
.content {
  border: solid 1px #eee;
  padding: 10px;
}
</style>

<table>
  <tbody>
    <tr class="clickable">
      <td>
        jas
      </td>
    </tr>
  </tbody>
</table>

<div class="content"></div>
<script>
  $(".clickable").on("click", function(){
    $(".content").load("home.html");
  });
</script>

For making individual rows clickable, we can assign class to tr. On clicking tr, update the div.

score 0 · Answer 2 · answered Jun 05 '11 at 20:52

0

JQuery can attach functions to click events on table cells, so give the table the rows are in an id, and instead of $('.load_link').click(), use $('.load_link, #tableId td').click().

answered Jun 05 '11 at 20:52

Steve Wilkes

7,085
3
29
32

Trigger jquery by clicking on table row

2 Answers2

Linked