表格单元格双击修改

js实现表格单元格双击修改

js:

  //鼠标双击事件      
    $(document).on("dblclick", "#Table1 [name^=Quality]", function () {
        var inputnum = $(this).find("input").size();
        if (inputnum == 0) {
            ChangeUpdate($(this));
        }
    });

    function ChangeUpdate(obj) {
        var tdDom = $(obj);
        var oldid = $(tdDom).attr("value"); //拿到id
        var oldvalue = $(tdDom).html();            
        //$(tdDom).css("padding", "0px");
        if (oldvalue != "") {
            $(tdDom).html("<input class='form-control' style=\" width:100%;\" type='text' value='" + oldvalue + "'/>");
        } else {
            $(tdDom).html("<input class='form-control' style=\" width:100%;\" type='text' value=''/>");
        }
        $(tdDom).find("input").focus();
        $(tdDom).find("input").click(function () {
            return false;
        }).blur(function () {
            var newvalue = $(tdDom).find("input").val();
            SaveChange(tdDom, oldid, oldvalue, newvalue);
        });
    }

    function SaveChange(tdDom, oldid, oldvalue, newvalue) {
        $.post("Finished-goods-delivery.aspx", { type: "Change", id: oldid, value: newvalue }, function (msg) {
            if (msg > 0) {
                //$(tdDom).css("padding", "8px");
                //$(tdDom).attr("userId", newid);
                $(tdDom).html(newvalue);
                //$(tdDom).css("background", GetStatusBg($(tdDom).html()))
            } else {
                //$(tdDom).css("padding", "8px");
                //$(tdDom).attr("userId", oldid);
                $(tdDom).html(oldvalue);
                alert("数据修改失败");
            }
        });
    }

html:

                                            <thead>
                                                <tr>
                                                    <th>发货方向</th>
                                                    <th style="width:90px;">工厂甩货</th>
                                                    <th style="width:70px;">急货</th>
                                                    <th style="width:120px;">最早出单时间</th>
                                                    <th style="width:120px;">备注</th>                                                       
                                         
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>A672</t>
                                                    <td>99</td>
                                                    <td>35</td>
                                                    <td>2019-02-25</td>
                                                    <td  title="双击修改" name="Quality" value="30072">测试</td>
                                                    
                                                </tr>
                                            </tbody>
                            </table>