在开发web式应用系统的时候 ,我们经常用到数据列表.传统修改数据行基本是点击修改按钮,然后跳转到修改程序代码进行修改,这往往是新开页,数据行多的时候操作有点不方便.那就需要 jquery结合ajax实现当前行双击修改的特效功能.

function tdEdit(element, id) {

    var i_a = \"

    var i_b = "\" />\";

    var t_a = \"\";</p> <p>    var t_b = \"\";

    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部分代码如下.表格行调用只需要在行里