Ajax, live edit table issue - php

Question

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