Ajax，实时编辑表问题

Im working om a menu system. I use a query to get the menu list from the database.

On that table I also have an edit and delete option. The edit and delete both works, but the edit function get activated on the TR.

I want to activate the edit function when I click on the edit TD.

When I just simply change

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

to

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

It does the job, but it only changes the value in the input field, not in the html and or database.

Ill hope u guys know what I mean, and can help me out.

Thanks in advance.

Here's the code:

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

$(document).ready(function() {

$(".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();
});

});

And the PHP for the table's

$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>";

    ?>  

And the ajax url php files

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);
}
?>