從數據庫輸出切換到編輯數據輸出

Question

我有一個數據庫，有一些記錄，我使用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> 

Answer 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> 

希望這有助於...