0

I have generated dynamic tables which will generate a list of tables rows and columns. If i double clicked a particular column that particular td should be available for in place editing. In place editing is working fine. But when i double click and update a value all column value is updated. I need to update particular value in particular td..Here is my code. In this get function return 10 status so i assigned to table. I want to edit any value among 10. If i edit now. Its updated in all the 10 status. Please anyone help me

UPDATED:(not working in place editing)

    <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>
user3614760
  • 9
  • 2
  • 7

1 Answers1

0

Here is an issue:

if(itemsdetails[3]=="R")
$tbody.append('<tr><td id="myid">0</td></tr>');

all of your new elements have the same id, you need something like this

if(itemsdetails[3]=="R")
{
    x++;
    $tbody.append('<tr><td id="myid'+x+' class='editableTD'">0</td></tr>'); //dynamic ids
}

then

$("#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);
});
chiliNUT
  • 18,989
  • 14
  • 66
  • 106