数据库输出使用切换来编辑数据

Question

I have a database with some record which i output on my page using php. This all works fine but i want to be able to edit the outputted information using the toggle functionality. So basicly i output text when a button edit is clicked i want to toggle that specific table and show the information once more but then in an input form.

   foreach( $result as $row2 )

     $div = $row2['id'] ;

    echo "<div id='d$div; '><table ><tr><td>" . 'Categorie: ' . '</td><td> ' . $row2['name'] .  '</td></tr>' 
. '<tr><td>' . 'Omschrijving: ' . '</td><td>' . $row2['comments'] . '</td></tr> . '<tr><td>' . '<button id="e1">' . 'Edit' . '</button>' . '</td></tr>' .  ' </table><hr>'; } ?></p>

If I would then would then echo everything out again using <form> input fields and use as div id f$div every record would get its unique id.

   foreach( $result as $row2 )

     $di = $row2['id'] ;

    echo "<div id='f$di; '><table ><tr><td>" . 'Categorie: ' . '</td><td> ' . $row2['name'] .  '</td></tr>' 
. '<tr><td>' . 'Omschrijving: ' . '</td><td>' . $row2['comments'] . '</td></tr> . '<tr><td>' . '<button id="e2">' . 'Safe' . '</button>' . '</td></tr>' .  ' </table><hr>'; } ?></p>

Then I would toggle it but I don't have the ids as they still have to be generated. How would I go about this...same would go for the click function but I can generate an id for these in the same way.

<script>

    $('#e1,#e2').click(function () {
    $('#d?,#f?').toggle();

})          
 </script>

Answer 1

You can do this with javascript, too. This is one example. You can even use AJAX to update, otherwise you can update the data in database and come back to the same page.

        <?php
    foreach($result as $row2) {
        $div = $row2['id'];
        echo "<div id='d$div'><table ><tr><td>" . "Categorie: " . "</td><td> " . $row2["name"] .  "</td></tr>" . "<tr><td>" . "Omschrijving: " . "</td><td>" . $row2["comments"] . "</td></tr>" . "<tr><td>" . "<button id=e$div onclick='makeForm(\"$div\",\"d$div\",\"$row2[name]\",\"$row2[comments]\")';>" . "Edit" . "</button>" . "</td></tr>" .  "</table><hr></div>
"; 
    }
    ?>

        <script>

        function makeForm(id,mydiv,category,comment){
                var div = document.getElementById(mydiv);
                var divHTML = "<form action='update.php' method='POST'><table> <tr><td>Categorie: </td> <td><input type='text' name='cat_" +id+ "' value='"+category + "' /></td></tr> <tr> <td>Omschrijving:</td> <td><input type='text' name='comment_" +id+ "' value='"+comment+"' /></td></tr> <tr><td> <input type='submit' value='Safe'></td><td><button onclick='removeForm(\""+id+"\",\""+mydiv+"\",\""+category +"\",\" "+comment+"\" ); return false;'>Cancel</button></td></tr></table> </form><hr>";

                div.innerHTML = divHTML;

                }
                function removeForm(id,mydiv,category,comment){
                    var div = document.getElementById(mydiv);
                    var divHTML = "<table> <tr><td>Categorie: </td> <td>"+category + "</td></tr> <tr> <td>Omschrijving:</td> <td>"+comment+"</td></tr> <tr><td><button onclick='makeForm(\""+id+"\",\""+mydiv+"\",\""+category +"\",\" "+comment+"\" ); '>Edit</button></td></tr></table><hr>";

                    div.innerHTML = divHTML;
                }    

    </script>

Hope this helps...