我已经生成了动态表，它将生成表的行和列列表。如果我双击一个特定的列，特定的td应该可用于就地编辑。就地编辑工作良好。但是当我双击并更新一个值时，所有列值都更新了。我需要更新特定的值在特定的td..这是我的代码。在这个get函数中返回10状态，因此i被分配给表。我想编辑10中的任何值。如果我现在编辑。所有10个状态都更新了。谁来帮帮我
已更新:(不工作的地方编辑)
<html>
<head><Title>In place editing of dynamic tables</title>
</head>
<body>
<div id="body"></div>
</body>
</html>
<script>
$(document).ready(function(){
var x;
x=0;
var table='<table>';
table += '<tr><th style=""> Status</th></tr>';
table += '</table></br>';
$("#body").append(table);
var $tbody = $('<tbody>').appendTo('#body table:last');
$.ajax({
type : 'POST',
url : '@routes.Application.get()',
data : {
itemupc : item[0]
},
beforeSend:function()
{
},
success : function(items) {
$.each(items, function(j, itemsdetails) {
if(itemsdetails[3]=="R")
x++;
$tbody.append('<tr><td id="myid"'+x+'" class="editableTD">0</td></tr>');
}
});
$("#item_content").on('dblclick','.editableTD',function(e){ //assign event to editableTD class
e.stopPropagation();
var currentID=$(this).attr("id"); //grab the current id instead
var currentValue= $(this).html();
inlineEditSave(currentID,currentValue);
});
function inlineEditSave(currentElement,currentValue)
{
//$(currentElement).html('<i class="fa-li fa fa-spinner fa-spin"></i>');
$(currentElement).html('<input type="text" class="thVal" value="' + currentValue + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentElement).html($(".thVal").val().trim());
}
});
});
</script>
这里有一个问题:
if(itemsdetails[3]=="R")
$tbody.append('<tr><td id="myid">0</td></tr>');
所有的新元素都有相同的id，你需要像这样
if(itemsdetails[3]=="R")
{
x++;
$tbody.append('<tr><td id="myid'+x+' class='editableTD'">0</td></tr>'); //dynamic ids
}
$("#item_content").on('dblclick','.editableTD',function(e){ //assign event to editableTD class
e.stopPropagation();
var currentID=$(this).attr('id'); //grab the current id instead
var currentValue= $(this).html();
inlineEditSave(currentID,currentValue);
});