0

我已经生成了动态表，它将生成表行和列的列表。如果我双击特定的列，则该特定 td 应该可用于就地编辑。就地编辑工作正常。但是当我双击并更新一个值时，所有列值都会更新。我需要更新特定的值，特别是 td ..这是我的代码。在这个 get 函数中返回 10 个状态，所以我分配给表。我想编辑 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>
4

1 回答 1

0

这里有一个问题：

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);
});
于 2014-05-18T17:59:58.323 回答