Getting a table row cell value when a specific column is is clicked

Question

I was able to retrieve all row values via table click event and getting its value via event.currentTarget.cells[4].innerText(); .

But i would like to apply this if a specific column is clicked only like, when i clicked an ID 21 under Username column . It should alert all the cell values of the row. And then when I clicked the other columns it should not alert.

This is my code. Please inform me if you are having problems the way I ask.

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#tableid').on('click', 'tr', function (event) {
            alert(event.currentTarget.cells[0].innerText);
            alert(event.currentTarget.cells[1].innerText);
            alert(event.currentTarget.cells[2].innerText);
            alert(event.currentTarget.cells[3].innerText);
            alert(event.currentTarget.cells[4].innerText);
        });
    });
</script>

Here is my HTML http://jsfiddle.net/jE5UM/

Answer 1

I'd suggest, in the absence of specific HTML and other information:

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {
        var cell = event.target,
            values = $(cell).siblings().addBack().map(function(){
                         return $(this).text();
                     }).get();
        alert(values);
    });
});

JS Fiddle demo .

References:

• addBack() .
• get() .
• map() .
• on() .
• siblings() .
• text() .

Answer 2

Try

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {                
        $(this).children().each(function(){
            alert($(this).text())
        })
    });
});

Demo: Fiddle

If you want an array as the result then

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {                
        var texts = $(this).children().map(function(){
            return $.trim($(this).html())
        }).get();
    });
});

Demo: Fiddle

Update

$(document).ready(function () {
    $('#tableid').on('click', 'tr td:nth-child(2)', function (event) {                
        var texts = $(this).closest('td').siblings().addBack().map(function(){
            return $.trim($(this).html())
        }).get();
        alert(texts.join())
    });
});

Demo: Fiddle