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


Output from database use toggle to edit data

我有一个数据库,其中包含一些记录,我使用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="e1">' . 'Edit' . '</button>' . '</td></tr>' .  ' </table><hr>'; } ?></p>

如果我愿意的话,那么我会使用<form>输入字段再次回显所有内容,并使用div id f$div,每个记录都会获得其唯一的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>

然后我会切换它,但我没有ID,因为它们仍然需要生成。我该怎么做。。。点击函数也是如此,但我可以用同样的方式为它们生成一个id。

<script>
    $('#e1,#e2').click(function () {
    $('#d?,#f?').toggle();
})          
 </script>

您也可以使用javascript来实现这一点。这就是一个例子。您甚至可以使用AJAX进行更新,否则您可以更新数据库中的数据并返回到同一页面。

        <?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>'n"; 
    }
    ?>
        <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>

希望这能帮助。。。