1

当我双击它时,我想编辑特定 id 的 td 值。我写了逻辑。在下面的代码中,“get()”函数将返回 10 个状态,该状态分配给表 td。如果我双击任何状态,我需要就地编辑和保存的功能。但我不知道为什么它不起作用。请任何人帮助我。

    <html>
    <head><title></title></head>
    <body>
    <div id="body" >
    </div>
    </body>
    </html>
    <script>


                    $(document).ready(function(){

                    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")

                    $tbody.append('<tr><td  id="my'+itemsdetails[0]+'" 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());

                            }
                        });
             $(document).click(function () {

                    $(currentElement).html($(".thVal").val().trim());

            });
    }
                    });

            </script>
4

1 回答 1

4

鉴于您使用的是 Font Awesome,我还可以假设您使用的是引导程序吗?如果是这样,您自己编写逻辑代码有什么特别的原因吗?有一个名为 x-edtiable 的库可以为您处理所有繁重的工作:

http://vitalets.github.io/x-editable/

演示/使用示例可以在这里找到:

http://vitalets.github.io/x-editable/demo-bs3.html

于 2014-05-19T04:45:12.863 回答