您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
jquery实现可编辑表格及入库操作
2016-08-17【网站建设常见问答】1526 人已围观
简介 在开发web式应用系统的时候 ,我们经常用到数据列表.传统修改数据行基本是点击修改按钮,然后跳转到修改程序代码进行修改,这往往是新开...
在开发web式应用系统的时候 ,我们经常用到数据列表.传统修改数据行基本是点击修改按钮,然后跳转到修改程序代码进行修改,这往往是新开页,数据行多的时候操作有点不方便.那就需要 jquery结合ajax实现当前行双击修改的特效功能.
function tdEdit(element, id) {
var i_a = \"
var i_b = "\" />\";
var t_a = \"\";
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部分代码如下.表格行调用只需要在行里
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:
很赞哦! ()
相关文章
随机图文
-
网站建设的最终目的
为什么我们要做网站呢?这个问题拿今天来说应该是相当简单来回答的。 众所周知,做网站不在乎做网站的外表(外表是做给自己看) 看中的是... -
.top域名开放注册啦
你想要一个短一点的好记一点的域名吗?是的 机会来了。宁波殷雯代理国际顶级域名 .top正式对外销售。 为何选择.top域名? ... -
mysql常见错误代码及解决办法
制作php+mysql的动态网站,数据库是经常需要打交道的事情。mysql一些常见的错误代码如下 130 :文件格式不正确。(还不是很清楚... -
2015年最值得学习的十种语言
编程的语言种类凡多,我们要把有限的精力去学习几种实用的语言来当技能。殷雯今天在这里跟大家建议的是大多是网站使用的编程语言,因为桌面程序我们还...