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();

         }

     });

 }

JS

　　前台页面绑定：　

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

Html

最终效果图：

JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中的相关教程结束。