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 に答える