How to handle click event on table at first column using jquery?

Question

 $('tr').click(function() {
        $("#showgrid").load('/Products/List/Items/');
    });

Using this I am handling click event on the row of the table.

How can I handle only on the first column? that is, giving click action to only first column not on entire row?

thanks

Answer 1

You can handle the first column using :first-child selector, like this:

$('tr td:first-child').click(function() {
  $("#showgrid").load('/Products/List/Items/');
});

This selector returns the first <td> in each <tr>.

Alternatively, if you have a lot of rows, use .delegate() for better performance (only one event handler), like this:

$('#myTable').delegate('tr td:first-child', 'click', function() {
  $('#showgrid').load('/Products/List/Items/');
});

Answer 2

that is simple. just add an event handler to the first td of each tr of the table. this jQuery code is almost like speaking it.

$("#table tr").find("td:first").click(function() { 
    $("#showgrid").load('/Products/List/Items/');
});