how to get html table cell text value with JQuery?

Question

I manage to get a collection of cells in a row when this row is clicked with the following:

$('.NamesGridClass tbody tr').bind('click', function() {
    var ch = $(this).children();
    alert(ch[0] + ' ' + ch[1]);
});

The above selection snippet successfully displays :

[object HTMLTableCellElement] [object HTMLTableCellElement]

I have tried ch[0].html(), ch[0].val(), ch[0].text(), and get errors. How can I get the content of my cells here ?

Answer 1

In order to use .html(), you need to turn those objects into jQuery objects:

$(ch[0]).html()

Same would apply to any other valid jQuery method you wish to apply.

Answer 2

Please use native code

ch[0].innerHTML

Answer 3

When you access an item in an array you get from jQuery, you get back plain old javascript elements, not jquery elements. You can either use the javascript .innerHTML or double wrap the the value with the jquery selector. I would recommend using .innerHTML since its simpler, so

$('.NamesGridClass tbody tr').bind('click', function() {
        var ch = $(this).children();
        alert(ch[0].innerHTML + ' ' + ch[1].innerHTML);
    });