how to get ID value from looped table using php and javascript - php

Question

I've been trying to work out how to create a table using php and mysql, this is what i've got so far...
PHP :-
foreach($result as $res){
echo '<tr><td style="display:none;"><p id="ID">' . $ID . ' </p></td><td>' . $res['NAME'] . '</td>
<td>' . $res['option2'] . '</td>
<td>' . $res['Option3'] . '</td>
<td>' . $res['Option4'] . '</td>
<td>' . $res['Option5'] . '</td>
<td class="deleteBtn"><button class="btn btn-danger btn-xs" id="deleteBtn">Delete</button></td></tr>';
}
Javascript:-
$('button#deleteBtn').click( function(){
data = $('p#ID').html();
alert(data);
// window.location('admin.php?link=LF1'+data);
});
when i click deleteBtn i want to delete the row the button is on, therefore i need the ID...
How do I get the value of $ID. my jquery alerts only the first ID for every button...
Thanks!

Answer 1

First of all, id should be unique, so you cannot do id="ID" for every row.
Try with:
foreach($result as $res){
echo '<tr data-id="' . $ID . '">';
// ...
echo '</tr>';
}
And in JavaScript:
$('button#deleteBtn').click( function(){
var id = $(this).parents('tr').data('id');
alert(id);
}

Answer 2

It looks like if you have more than 1 row, you'll inevitably end up with a number of elements with the same ID. A cleaner up version would be:
More easily, you can simply use .closest()
PHP:
echo '<tr id='.$ID.'><td style="display:none;"><p id="ID">' . $ID . ' </p></td><td>' . $res['NAME'] . '</td>
<td>' . $res['option2'] . '</td>
<td>' . $res['Option3'] . '</td>
<td>' . $res['Option4'] . '</td>
<td>' . $res['Option5'] . '</td>
<td class="deleteBtn"><button class="delete btn btn-danger btn-xs">Delete</button></td></tr>'
jQuery:
$('button.delete').click( function(){
var toDelete = $(this).closest('tr').attr('id');
alert(toDelete);
});

Answer 3

You can use data attribute to keep your id. like data-id="1"
foreach($result as $res) {
echo '<tr><td style="display:none;"><p data-id="'.$ID.'" id="ID"'.$ID.' data-id="">' . $ID . ' </p></td><td>' . $res['NAME'] . '</td>
<td>' . $res['option2'] . '</td>
<td>' . $res['Option3'] . '</td>
<td>' . $res['Option4'] . '</td>
<td>' . $res['Option5'] . '</td>
<td class="deleteBtn"><button onclick="delete("ID'.$ID.')" class="btn btn-danger btn-xs" id="deleteBtn">Delete</button></td></tr>';
}
Now you can Id like this:-
$('button#deleteBtn').click( function(){
data = $(this).parents('tr').data('id');
alert(data);
});