从db中删除行并使用jquery进行查看

Question

I have a webpage that shows data as followed:

| id | name   | delete |
|  1 | orange | delete |
|  2 | apple  | delete | etc...

When you press delete (its a button) you get a jquery dialog showing again two buttons. You can delete multiple items at once or only the selected item.

-------------------------------
|dialog                       |
-------------------------------
|delete this row              |
|delete entire series         |
-------------------------------

My question is: When for example 'delete this row' is selected in the dialogbox, how do I get the ID of the selected row in jquery? How can I redirect to a php page that deletes the row in the db and then redirect to the current updated page (with the row removed)?

I'm very new to jquery, but this is what I got so far:

JQuery

<script>
$(function() {
   $( ".dialog" ).dialog({ autoOpen: false });
});
$(function() {
  $(".showDialog").click( function()
       {
         $( ".dialog" ).dialog( "open");
       });   
 });
 $(function() {
  $( ".deleteEvent" ).click( function()
    { 

        $( ".dialog" ).dialog( "close");
        $(this).closest("tr").remove(); // doesn't work
    });
 });
 </script>

Dialog

<div class="dialog" title="delete event dialog">
    <input class="deleteEvent" type='button' value='delete this row'/>
</div>

Table

foreach($table as $row)
{
    echo '<tr><td>'.$row['id'].'</td>',
    '<td>'.$row['name'].'</td>',
    '<td><div class="showDialog" ><IMG style="margin-left:15px;" src="./public/pictures/trash.gif"></a></div></td>',
    '</tr>';
}

Answer 1

when you output your html with the delete input buttons, also add a hidden input field passing the id as the value

edit:

I misread your code, looks like you don't have individual input buttons for each displayed row. For your case, I would suggest adding the row as part of your div id value or else a custom attrib in your div, something like this:

foreach($table as $row)
{
    echo '<tr><td>'.$row['id'].'</td>',
    '<td>'.$row['name'].'</td>',
    '<td><div id="row_'.$row['id'].'" class="showDialog" ><IMG style="margin-left:15px;" src="./public/pictures/trash.gif"></a></div></td>',
    '</tr>';
}

or

foreach($table as $row)
{
    echo '<tr><td>'.$row['id'].'</td>',
    '<td>'.$row['name'].'</td>',
    '<td><div row="'.$row['id'].'" class="showDialog" ><IMG style="margin-left:15px;" src="./public/pictures/trash.gif"></a></div></td>',
    '</tr>';
}

then in your click event you can use $(this).attr('id').split('_')[1] or $(this).attr('row') respectively