Traversing HTML DOM Elements in foreach loop

You can use closest('tr') to find the nearest parent tr element, then index() to get the row number. Try this:

$('td').click(function() {
    var $tr = $(this).closest('tr');
    var rowIndex = $tr.index();
});

Example fiddle

Also note that you should remove the id attribute from the td elements in your PHP loop, otherwise you will duplicate them, which is invalid and may lead to JS or rendering issues.

$('table').on('click', 'td', function() {
    var rowNumber = $(this).closest('tr').index() + 1;
    var content = $(this).html();
    console.log(rowNumber);
    console.log(content);
});

You do not need to know via some sort of identification which you have clicked as jQuery is aware of the element you clicked in relation to the overall DOM.

You do need to add 1 to the row number variable as the index starts counting at 0.

EXAMPLE

Use .index() if you need to know the position of the element.

$('td').on('click',function()
{
    console.log($(this).closest('tr').index())
})

Otherwise $(this) will be the element itself.

Assuming you listen for clicks on the TDs, you can get the closest ancestor TR and simply see what it's index position is within its parent with index():

$('table td').on('click', function(){
    console.log($(this).closest('tr').index());
});

If the rows/TDs are added dynamically, use a delegated version of on instead:

$('table').on('click', 'td' function(){
    console.log($(this).closest('tr').index());
});

This one applies the selector only when the event occurs.

Notes:

• index returns values starting at 0.
• You probably do not actually care about the index value itself, but just the closest('tr') in order to do other operations.

Update:

if you want a row id in the table, apply that to the TR element so you get

<tr data-parent_id="myidhere">

and access with

$('table td').on('click', function(){
    var id = $(this).closest('tr').data('parent_id');
});

If you need the row number, you could use the index function. The easiest way to do this is to change the click handler (assuming you want to get the index of any td in your tr that is clicked). You don't even need to put ids on your TDs anymore:

<tr class = 'clickiness'>
    <td id="x"><?php echo $foo->bar1; ?></td>
    <td id="y"><?php echo $foo->bar2; ?></td>
    <td id="z"><?php echo $foo->bar3; ?></td>
</tr>
<script>
$( document ).ready( function() {
    $( '.clickiness' ).click( function( event ) {
        var $tds = $( this ).children();
        var $clickedTD = $( event.target );
        var clickedIndex = $clickedTD.index( $tds );    // the zero-based index
    });
});
</script>

What I'm doing here is setting setting the click handler to the TR, so when anything inside that TR is clicked, the function will run, and then I'm using the event variable to get the actual element that was clicked.