Question

I have a table in which each tr is a record and each td is a column. When I use the click event and click on tr, I need both tr id and the 6th column td id.

Both tr and td id should be assigned to a variable.

How to do this with a jQuery selector?

Is this correct?

$(‘tr td).(‘click’, function (
{
});

Any help would be be appreciated. I tried this too:

$('tr td:nth-child(5)')

… but it didn’t work.

Answer 1

HTML:

<table border="1">
    <tr id="row1">
        <td id="a1">A1</td>
        <td id="b1">B1</td>
        <td id="c1">C1</td>
        <td id="d1">D1</td>
        <td id="e1">E1</td>
        <td id="f1" class="sixth">F1</td>
    </tr>
    <tr id="row2">
        <td id="a2">A2</td>
        <td id="b2">B2</td>
        <td id="c2">C2</td>
        <td id="d2">D2</td>
        <td id="e2">E2</td>
        <td id="f2" class="sixth">F2</td>
    </tr>
    <tr id="row3">
        <td id="a3">A3</td>
        <td id="b3">B3</td>
        <td id="c3">C3</td>
        <td id="d3">D3</td>
        <td id="e3">E3</td>
        <td id="f3"class="sixth">F3</td>
    </tr>
</table>

jQuery:

$(document).ready(function(){

    $('tr').click(function(){
        rowID = $(this)[0].id;
        celID = $(this).children('td:eq(5)')[0].id;
        alert('Row '+rowID+'\nCell '+celID);
    });

});

See jsFiddle. (NOTE: The class="sixth" but was just for debugging and display purposes in jsFiddle.

NOTE: Revised solution after question was clarified by OP: jsFiddle

$(document).ready(function(){

  $('td:nth-child(6)').click(function(){
    alert( $(this)[0].id );
  });

}):