我有一个数据库,其中包含一些记录,我使用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>
希望这能帮助。。。