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

时间:2016-01-08 09:57:28

标签: javascript php jquery mysql

我有一个数据库,其中包含一些记录,我使用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>

1 个答案:

答案 0 :(得分:1)

您也可以使用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>

希望这会有所帮助......