Question

I am new when it comes to PHP, Javascript and AJAX, so sorry if this is a simple question. I am working on plugin; in this plugin I am developing a table in PHP. Users are able to add links to a specific widget to display on their home page. I am trying to make a function with Javascript and AJAX that deletes a row from their list and database. I am trying to assign each TR a unique ID but I am unsure how to do this.. here is my code:

<table id="links" width="350px" border="1">
    <tr>
        <td></td>
        <td><b>Display</b></td>
        <td><b>Link *</b></td>
        <?php       

        if ( isset($_POST['links']) ) {

            $displays = $_POST['displays'];
            $links = $_POST['links'];
            $domain = $_POST['domain'];

            foreach($links as $i => $link) {
                if ( empty($displays[$i]) )
                    $displays[$i] = "";
                if( empty($links[$i]))
                    unset($links[$i]);

            }


            $autodomain = array('displays' => $displays, 'links' => $links, 'domain' => $domain);

            $options = get_option("autodomain_links") or array();
            $options[] = $autodomain;
            //$dump = array();
            update_option("autodomain_links",  $options);

        }
        $options = get_option("autodomain_links");

        if ($options) {

            foreach($options as $option) if ($tmp++ < 15) {

                $displays = $option['displays'];
                $links = $option['links'];
                $domain = $option['domain'];
                foreach($links as $i => $link) 
                {
                    echo '<tr>';
                    echo '<td><a href="#" class="delete"/><img alt="" border="0" src="https://jarkin.its-express-tst.syr.edu/wp-content/uploads/2011/06/delete.png" /></a></td>';
                    echo '<td>' . $displays[$i] . '</td>';
                    echo '<td>' . $link . ' ' . $domain . '</td>';
                    echo '</tr>';
                ;

                }

            }

        }


        ?>

</table>

Here is the Javascript/AJAX:

<script type="text/javascript" >
$(document).ready(function()
        {
            $('table#links td a.delete'').click(function()
            {
                if (confirm("Are you sure you want to delete this row?"))
                {
                    var id = $(this).parent().parent().attr('id');
                    var data = 'id=' + id ;
                    var parent = $(this).parent().parent();

                    $.ajax(
                    {
                           type: "POST",
                           url: "delete_row.php",
                           data: data,
                           cache: false,

                           success: function()
                           {
                                parent.fadeOut('slow', function() {$(this).remove();});
                           }
                     });                
                }
            });
        });
</script>

The Javascript/ajax is using the Table id and the TR id as the parent to identify the row – but since I am using PHP I don’t know how to generate unique IDs for each of the TR’s.

Answer 1

You can define it by $i:

       foreach($links as $i => $link) 
        {
            echo '<tr id="id_'.$i.'">'; //<--here
            echo '<td><a href="#" class="delete"/><img alt="" border="0" src="https://jarkin.its-express-tst.syr.edu/wp-content/uploads/2011/06/delete.png" /></a></td>';
            echo '<td>' . $displays[$i] . '</td>';
            echo '<td>' . $link . ' ' . $domain . '</td>';
            echo '</tr>';
        ;

        }

Then each row’s id is id_{rowNumber}