Question

我正在使用菜单系统。我使用查询从数据库中获取菜单列表。

在该表上，我还有一个编辑和删除选项。编辑和删除都有效，但编辑功能在TR上激活。

我想在点击编辑TD时激活编辑功能。

当我只是简单地改变

$(".edit_tr").click(function()

到

$(".editmenu").click(function()

它可以完成这项工作，但它只会更改输入字段中的值，而不会更改html和/或数据库中的值。

我希望你们知道我的意思，并且可以帮助我。

提前致谢。

以下是代码：

使用Javascript：

// delete menu

$（document）.ready（function（）{

// delete the entry once we have confirmed that it should be deleted
$('.delete').click(function() {
    var parent = $(this).closest('tr');
    $.ajax({
        type: 'get',
        url: 'deletemenu.php', // <- replace this with your url here
        data: 'ajax=1&delete=' + $(this).attr('id'),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function() {
            parent.fadeOut(300,function() {
                parent.remove();
            });
        }
    });        
});

}）;

// edit menu

（文档）$。就绪（（）的函数 {

$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#menunaam_"+ID).hide();
$("#voorgerecht_"+ID).hide();
$("#hoofdgerecht_"+ID).hide();
$("#nagerecht_"+ID).hide();
$("#prijs_"+ID).hide();
$("#menunaam_input_"+ID).show();
$("#voorgerecht_input_"+ID).show();
$("#hoofdgerecht_input_"+ID).show();
$("#nagerecht_input_"+ID).show();
$("#prijs_input_"+ID).show();

}).change(function()
{
var ID=$(this).attr('id');
var menunaam=$("#menunaam_input_"+ID).val();
var voorgerecht=$("#voorgerecht_input_"+ID).val();
var hoofdgerecht=$("#hoofdgerecht_input_"+ID).val();
var nagerecht=$("#nagerecht_input_"+ID).val();
var prijs=$("#prijs_input_"+ID).val();
var dataString = 'id='+ ID +'&menunaam='+menunaam+'&voorgerecht='+voorgerecht+'&hoofdgerecht='+hoofdgerecht+'&nagerecht='+nagerecht+'&prijs='+prijs;
$("#menunaam_"+ID).html('<img src="load.gif" />'); // Loading image

if(menunaam.length>0&& voorgerecht.length>0&& hoofdgerecht.length>0&& nagerecht.length>0&& prijs.length>0)
{

$.ajax({
type: "POST",
url: "editmenu.php",
data: dataString,
cache: false,
success: function(html)
{
$("#menunaam_"+ID).html(menunaam);
$("#voorgerecht_"+ID).html(voorgerecht);
$("#hoofdgerecht_"+ID).html(hoofdgerecht);
$("#nagerecht_"+ID).html(nagerecht);
$("#prijs_"+ID).html(prijs);
}
});
}
else
{
alert('Vul de velden in');
}

});

// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});

// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});

表格的PHP

$sql = "SELECT * FROM menus";

        $result = mysql_query($sql);

        echo "<table>";
        echo "<th>#</th> <th>Menu naam</th> <th> Voorgerecht </th> <th> Hoofdgerecht </th> <th> Nagerecht </th> <th> Prijs </th> <th></th><th></th>";

        while($row = mysql_fetch_assoc($result)) {
            $menunr = $row['menunr'];
            $menunaam = $row['menunaam'];
            $voorgerecht = $row['voorgerecht'];
            $hoofdgerecht = $row['hoofdgerecht'];
            $nagerecht = $row['nagerecht'];
            $prijs = $row['prijs'];


        // open tr
        echo "<tr id='$menunr' class='edit_tr'>";

        echo "<td>$menunr</td>";
        echo "<td><span id='menunaam_$menunr' class='text'>$menunaam</span><input type='text' value='$menunaam' class='editbox' id='menunaam_input_$menunr'/></td>"; 
        echo "<td><span id='voorgerecht_$menunr' class='text'>$voorgerecht</span><input type='text' value='$voorgerecht' class='editbox' id='voorgerecht_input_$menunr'/></td>";
        echo "<td><span id='hoofdgerecht_$menunr' class='text'>$hoofdgerecht</span><input type='text' value='$hoofdgerecht' class='editbox' id='hoofdgerecht_input_$menunr'/></td>";
        echo "<td><span id='nagerecht_$menunr' class='text'>$nagerecht</span><input type='text' value='$nagerecht' class='editbox' id='nagerecht_input_$menunr'/></td>";
        echo "<td><span id='prijs_$menunr' class='text'>$prijs</span><input type='text' value='$prijs' class='editbox' id='prijs_input_$menunr'/></td>";
        echo "<td id='$menunr' class='editmenu'>edit</td>";
        echo "<td><div  class='delete' >delete</div></td>";

        // close tr

        echo "</tr>"; 

        }           
        echo "</table>";

    ?>

和ajax url php文件

deletemenu.php

    <?php
include 'config.php';
if(isset($_GET['delete']))
{
    $query = 'DELETE FROM menus WHERE menunr = '.$_GET['delete'];
    $result = mysql_query($query);
}

?>

editmenu.php

<?php
include("config.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$menunaam=mysql_escape_String($_POST['menunaam']);
$voorgerecht=mysql_escape_String($_POST['voorgerecht']);
$hoofdgerecht=mysql_escape_String($_POST['hoofdgerecht']);
$nagerecht=mysql_escape_String($_POST['nagerecht']);
$prijs=mysql_escape_String($_POST['prijs']);
$sql = "update menus set menunaam='$menunaam',voorgerecht='$voorgerecht',hoofdgerecht='$hoofdgerecht',nagerecht='$nagerecht',prijs='$prijs' where menunr='$id'";
mysql_query($sql);
}
?>

Ajax，实时编辑表问题

0 个答案: