jQuery for getting Click event on a Table row

Question

I have the following table

<table>
<tr class="rows"><td>cell1</td><td>cell2</td></tr>
</table>

How can i set an alert message if i clicked on any of the column of <tr class="rows"> using jquery?

score 19 · Accepted Answer · answered Jul 25 '11 at 13:44

19

You can use delegate for better performance which will attach click event to root container of rows i.e table

$(document).ready(function(){
    $("tableSelector").delegate("tr.rows", "click", function(){
        alert("Click!");
    });
});

answered Jul 25 '11 at 13:44

ShankarSangoli

69,612
13
93
124

Hi, How can I get the colomn hearder html inside this function? – Nikhil Dinesh Jan 28 '13 at 22:40
1

@NikhilDinesh - You can use the `event.target` to find out which column is clicked and get the index of it. Using the index you can select the required column from the header and get the html. – ShankarSangoli Jan 31 '13 at 15:41
1

How can I get the td content ("cell1" and "cell2" text from the question example)? – PlainOldProgrammer Jul 01 '14 at 18:48
`delegate` is deprecated now. Use `.on` instead – Nikhil Nanjappa Jun 11 '21 at 10:29

epascarello · Answer 2 · 2013-01-28T22:56:59.973

13

$(
  function(){
      $(".rows").click(
        function(e){
            alert("Clicked on row");
            alert(e.target.innerHTML);
        }
      )
  }
)

Example

Better solution

$(document).on("click","tr.rows td", function(e){
    alert(e.target.innerHTML);
});

edited Jan 28 '13 at 22:56

answered Jul 25 '11 at 13:43

epascarello

204,599
20
195
236

$(document).on("click","tr.rows td", function(e){ alert(e.target.innerHTML); }); This worked great for new row added – RackM Nov 01 '19 at 10:55

score 5 · Answer 3 · answered Jul 25 '11 at 13:41

5

$(document).ready(function(){
    $("tr.rows").click(function(){
        alert("Click!");
    });
});

answered Jul 25 '11 at 13:41

Fender

3,055
1
17
25

score 2 · Answer 4 · answered Jul 25 '11 at 13:43

2

$(".rows").click(function (){ 
   alert('click');
});

answered Jul 25 '11 at 13:43

Svetlin Panayotov

620
4
12

jQuery for getting Click event on a Table row

4 Answers4

Linked