JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中

      本文属于原创，转载请标明出处！

　　近期在做项目时，要实现通过双击Table表格的TR，使Table行变成可编辑，来实现修改数据并保存到数据库中的功能，无需多说，直接贴代码吧。希望能得到各位同仁指正。       

function tdEdit(element, id) {
    var i_a = "<input class='edit_td' type='text' style='height:30px; width:40px;' value='";
    var i_b = "'/>";
    var t_a = "<textarea class='tarea' cols='63' rows='3' style='width:90%'>";
    var t_b = "</textarea>";
    var td = $(element).find("td");
    if (td.length > 0) {
        var sc = $(element).children().eq(1).text();
        var ss = $(element).children().eq(2).text();
        var sequence = $(element).children().eq(3).text();
        var weight = $(element).children().eq(4).text();
        var max = $(element).children().eq(5).text();
        var min = $(element).children().eq(6).text();
        var cv = $(element).children().eq(7).text();
        var explain = $(element).children().eq(8).text();

        $(element).children().eq(1).html($(t_a + sc + t_b));
        $(element).children().eq(2).html($(t_a + ss + t_b));
        $(element).children().eq(3).html($(i_a + sequence + "'id='num1" + i_b));
        $(element).children().eq(4).html($(i_a + weight + "'id='num2" + i_b));
        $(element).children().eq(5).html($(i_a + max + "'id='maxvalue" + i_b));
        $(element).children().eq(6).html($(i_a + min + "'id='minvalue" + i_b));
        $(element).children().eq(7).html($(t_a + cv + t_b));
        $(element).children().eq(8).html($(t_a + explain + t_b));
    }
    $(".edit_td").click(function () {
        return false;
    });
    $(".tarea").click(function () {
        return false;
    });
    //获取焦点
    $(".edit_td").trigger("focus");
    $(".tarea").trigger("focus");

    //文本框失去焦点后提交内容，重新变为文本
    $(".save").click(function () {
        //验证信息"n":/^\d+$/
        var reg = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
        var num1 = $("#num1").val();
        var num2 = $("#num2").val();
        var max = $("#maxvalue").val();
        var min = $("#minvalue").val();
        if (parseInt(min) > parseInt(max)) {
            alert("最小值不能大于最大值！");            
            return false;
        }
        if (!reg.test(num1) || !reg.test(num2) || !reg.test(max) || !reg.test(min)) {
            alert("请输入数字!");            
            return false;
        }
        //重新赋上新值
        $(".edit_td").each(function (i) {
            var newtxt = $(this).val();
            $(element).children().eq(i + 3).html(newtxt);
        });
        $(".tarea").each(function (j) {
            var newtarea = $(this).val();
            if (j < 2) {
                $(element).children().eq(j + 1).html(newtarea);
            }
            else {
                $(element).children().eq(j + 5).html(newtarea);
            }
        });

        var new_sc = $(element).children().eq(1).text();
        var new_ss = $(element).children().eq(2).text();
        var new_sequence = $(element).children().eq(3).text();
        var new_weight = $(element).children().eq(4).text();
        var new_max = $(element).children().eq(5).text();
        var new_min = $(element).children().eq(6).text();
        var new_cv = $(element).children().eq(7).text();
        var new_explain = $(element).children().eq(8).text();
        if (new_sc != sc || new_ss != ss || new_sequence != sequence || new_weight != weight || new_max != max || new_min != min || new_cv != cv || new_explain != explain) {
            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                url: '/Ajax/AjaxAction.ashx/UpdateRuleDetail',
                data: '{id:"' + id + '",strCon:"' + new_sc + '",strStandard:"' + new_ss + '",Sequence:"' + new_sequence + '",Weight:"' + new_weight + '",CandidateValue:"'
                    + new_cv + '",MaxValue:"' + new_max + '",MinValue:"' + new_min + '",Explain:"' + new_explain + '"}',
                dataType: 'json',
                async: true,
                beforeSend: function () {
                },
                success: function (data) {                   
                    alert("保存成功！");
                    window.location.reload();   //刷新页面               
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + ':' + textStatus);
                    window.location.reload();
                }
            });
        }
        else {
            alert("温馨提示：您没有做任何修改！");
            window.location.reload();
        }
        
    });
}

　　前台页面绑定：　

<tr ondblclick="tdEdit(this,@item.ID)"></tr>

     最终效果图：