How to access specific cell of clicked table row in javascript

Question

I have an HTML table populated from database. And a jquery function that adds client click event to every table row.

$(function() {
    $(".TreeTable tr").each(function(index) {
        $(this).click(function() {
            alert($(this).text());
        });
    });
});

Now I am able to get complete row values by clicking on any row. Now I need to access individual cell value in that function. Can any one tell me how I get individual cell value on row click.

I presume you're interested in multiple cell values in the clicked row, rather than the value of the specific cell that was clicked? — Alnitak, Mar 25 '13 at 13:18

leoinfo · Accepted Answer · 2013-03-25T14:19:30.550

Take a look at this:

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

Here is the working code: http://jsfiddle.net/VbA9D/

In case you have other HTML elements inside the table cells on which you might click, the below example will work better:

$(document).ready(function(){
    $('.TreeTable tr').click(function(e){
        var cell = $(e.target).get(0); // This is the TD you clicked
        if(cell.nodeName != 'TD') 
            cell = $(cell).closest('td').get(0);
        var tr = $(this); // This is the TR you clicked
        $('#out').empty();
        $('td', tr).each(function(i, td){
            $('#out').html(
              $('#out').html()
              +'<br>'
              +i+': '+$(td).text() 
              + (td===cell?' [clicked]':'') );
        });
    });
});

And here is the code you can test:

http://jsfiddle.net/7PWu5/

Alnitak · Answer 2 · 2013-03-25T13:22:36.770

5

First, there's no need for the .each - the .click method will bind to every passed element, not only the first.

Second, there's a specific properties called cells on table row elements that gives direct access to the row's cells:

$('.TreeTable').on('click', 'tr', function() {
    var td = this.cells[0];  // the first <td>
    alert( $(td).text() );
});

Note the use of event delegation - the event handler is actually registered on the entire table, and then relies on event bubbling to tell you which row was clicked (and from that obtain the cell text).

edited Mar 25 '13 at 13:22

answered Mar 25 '13 at 13:15

Alnitak

334,560
70
407
495

I did not know about the cells property. Big help. – Ken Ingram Aug 05 '16 at 23:36
1

+ 1 for use of event delegation. Much more efficient, instead of attaching listeners to 1000 rows, for example... – fraktal12 Nov 16 '17 at 11:28

score 1 · Answer 3 · answered Mar 25 '13 at 13:12

You can get the second cell by using

 alert($('td', this).eq(1).text());

Usually, for a more reliable code, you'll prefer to add a class to your desired cell so that you can use

 alert($('td.myclass', this).text());

If what you want is to get the cell which was clicked, simply bind the event to the cell :

$(".TreeTable  td").click(function() { // td not tr
     alert($(this).text());
});

Note that it's useless to loop over a jQuery collection to bind an event, as you can see from my last code.

score 1 · Answer 4 · answered Mar 25 '13 at 13:16

1

I prefer this:

$('.TreeTable').on('click', 'td', function() { // td not tr
     alert($(this).text());
});

answered Mar 25 '13 at 13:16

Mr_Green

40,727
45
159
271

score 1 · Answer 5 · answered Mar 25 '13 at 13:16

You don't need to explicitly iterate using .each() to bind event handlers to a set of elements, the event binding functions will implicitly do that for you. Due to event propagation, you can bind an event handler to the <tr> and use event.target (the originating element) to get a reference to the element that was actually clicked on (the <td>):

$(function() {
    $('.TreeTable tr').click(function(event) {
        console.log(this); // the <tr>
        console.log(event.target); // the <td>
    });
});

That's assuming you're interested in the specific <td> element that was clicked on.

How to access specific cell of clicked table row in javascript

5 Answers5

Linked