Question

我想在双击时编辑特定id的td值。我写了逻辑。在下面的代码＆＃39; get（）＆＃39;函数将返回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>

Answer 1

鉴于你正在使用Font Awesome，我还可以假设你正在使用bootstrap吗？如果是这样，您自己编写逻辑有什么特别的原因吗？有一个名为x-edtiable的库，可以为您处理所有繁重的工作：

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

演示/用法示例可在此处找到：

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

双击时如何编辑td值

1 个答案: