CODEWITHSUNDEEP
jquery
fil
fil

Reputation: 137

Select Table Row w/ Jquery

I have this table structure:

<div class="producttable">
<table>
<tbody>
<tr><th>Product</th><th>SKU</th></tr>
<tr><td>Product1</td><td>SKU1</td></tr>
<tr><td>Product2</td><td>SKU2</td></tr>
</tbody>
</table>
</div>

I'm attempting to make an entire row clickable, but am not able to get the right jquery selector. I've tried:

$(".producttable tr").click....

The only selector that seems to work is:

$(".producttable").click

- but this selects the entire table. Any advice on how to get the row?

Upvotes: 0

Views: 66

Answers (3)

Marcelo Myara
Marcelo Myara

Reputation: 3011

It is working for me.

https://jsfiddle.net/o7qt4zuc/10/

$(document).ready(function() {
  $('.producttable tr').on('click', function(e) {
    var row = $(this);
    row.css('background-color', 'red');
  });
});

You should really check if the event bubling isn't getting you. The click occurs in the TUDO first and then it is bubled up to the TR. This may be a catch.

Other thing to be aware is the actions that you are performing on the selected element. Can you edit the question with the full function body?

Upvotes: 1

ATJ
ATJ

Reputation: 325

You can use traversing, e.g.: 

    $(".producttable").find("tr").click(function(){
        alert("you selected a table row!");
    });

See here for jQuery traversing methods: https://api.jquery.com/category/traversing/

Upvotes: 0

Ariel
Ariel

Reputation: 1436

you can use 

$(".producttable table tr")

Just one more tip, the click event is fired from the td element, an example to add an active class to the row here

Upvotes: 1

Related Questions