table下的表格实现双击变为文本框，利用ajax提交表单

前些日子在公司里遇到一个需求，如题，所以分享一下写法：

JS:

//双击触发的事件
function dbl_c(){

    $(".td1").dblclick(function(){
        var td = $(this);
        var text = $.trim(td.text());
        var txt = $("<input type='text' >").val(text);
        txt.blur(function(){
            var rdremark = $(this).val();

            //获取同行不同列的值，通过当前对象的父节点的父节点(td->tr->table)获取td类名applyid这一列的遍历
            var applyid = $(this).parent().parent().find("td.applyid:eq(0)").text();

            alert("当前申请编号为:" + applyid + "，审核阅读标注修改成功！");
            $.ajax({
                url : "xxxx(此处是你的action)",data : {"applyid" : applyid,"rdremark" : rdremark},type : "post",async : true,cache : false,dataType : "json",success : function(){
                    //这里是成功后的执行函数
                }
            });
            var newText = $(this).val();
            $(this).remove();
            td.text(newText);

        });
        td.text("");
        td.append(txt);
        txt.focus();
    });
}

表格：

<td class="td1" ondblclick="dbl_c()" ><%=Pagetools.StringFromObject(map.get("rdremark")) %></td>

最后的效果就是在现实的表格中，你所做的对应的双击事件单元格处双击，即可变为文本框，鼠标点击别处，既可恢复为单元格。

原文地址：https://www.jb51.cc/ajax/161202.html