您现在的位置是：首页 > 网站建设常见问答网站建设常见问答

jquery实现可编辑表格及入库操作

2016-08-17【网站建设常见问答】2058 人已围观

简介在开发web式应用系统的时候 ,我们经常用到数据列表.传统修改数据行基本是点击修改按钮,然后跳转到修改程序代码进行修改,这往往是新开...

在开发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();

}

});