CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashish Rathore
Ashish Rathore

Reputation: 2696

How to access specific cell of clicked table row in javascript

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.

Upvotes: 5

Views: 25330

Answers (5)

leoinfo
leoinfo

Reputation: 8195

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/

Upvotes: 8

Alnitak
Alnitak

Reputation: 339786

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).

Upvotes: 5

Anthony Grist
Anthony Grist

Reputation: 38345

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.

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

I prefer this:

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

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

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.

Upvotes: 1

Related Questions