ECL超级计算机,JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中...

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

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

function tdEdit(element, id) {

var i_a = "";

var t_a = "";

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

前台页面绑定：

Html

最终效果图：

把Execl表格中的数据获取出来保存到数据库中

比如我们遇到一些需要把execl表格中的数据保存到数据库中,一条一条保存效率底下而且容易出错,数据量少还好,一旦遇到数据量大的时候就会累死个人啊,下面我们就来把execl表格中数据保存到对应的数据库中 ...

使用pandas中的raad&lowbar;html函数爬取TOP500超级计算机表格数据并保存到csv文件和mysql数据库中

参考链接:https://www.makcyun.top/web_scraping_withpython2.html #!/usr/bin/env python # -*- coding: utf-8 ...

把Dev的excel表格用clientdataset保存到数据库中。

网上很多,如何把图片.word.excel等保存到数据库中.可是自己就是死活出现异常,百思不得其解.原因找到了,为什么没有去弄明白: 在sql server字段类型中,我把存储字段设成binary,结 ...

在jquery的ajax中添加自定义的header信息

转自网络 1 $.ajax({ type: "POST", url: "http://192.168.0.88/action.cgi?ActionID=WEB_Reque ...

前端 HTML body标签相关内容 常用标签 表格标签 table

表格标签 table 表格由

标签定义).字母 td 指表 ... 使用Jquery的Ajax调用 最近在学习web开发,试用了一下Jquery的ajax调用. 首先,新建一个MVC4的项目,在HomeController.cs中添加一个Action,命名为GetData, 通过这个为ajax提供数 ... 12 Servlet_04 Servlet增删改查 静态页面与动态页面 EL表达式 table表格的一些样式 今天学习了servlet的增删改查: 存储数据 setAttribute(String name,Object obj );获取数据 getAttribute(String name);删除数据 re ... 数据库中table 和 schema的区别 什么是Database,什么是Schema,什么是Table,什么是列,什么是行,什么是User? 我们可以把Database看作是一个大仓库,仓库分了很多很多的房间,Schema就是其中的房间,一个 ... jquery通过AJAX从后台获取信息并显示在表格上的类 前一阵我写了:现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ... 随机推荐 spring-mybatis jar下载地址 http://central.maven.org/maven2/org/mybatis/mybatis-spring/1.3.0/ mysql之旅【第一篇】 1,基本操作 create databades 数据库名: #创建数据库 show databases; #显示存在的数据库 drop database 数据库名字 #删除数据库 2,数据库存储引擎介 ... BZOJ2276: [Poi2011]Temperature 2276: [Poi2011]Temperature Time Limit: 20 Sec  Memory Limit: 32 MBSubmit: 293  Solved: 117[Submit][S ... 2D丛林逃生 游戏介绍: 游戏地图采用二维数组:     每一个小块(Piece)类         上面有一个类型(StuffType)用于判断该小块上面站着的是什么 怪物,玩家,血瓶等等     怪物AI:   ... EclEmma单元测试覆盖率统计插件 EclEmma是Eclipse里的一个插件,安装简单,覆盖率显示直观.安装EclEmma.打开Eclipse,点击Help → Intall New SofaWare → Work with 输入 h ... iOS - Quartz 2D 贝塞尔曲线 1.贝塞尔曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支 ... Flask学习【第11篇】：整合Flask中的一些知识点 SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from sq ... maven待整理 http://blog.csdn.net/column/details/yuguiyang-maven.html?&page=2 Java日期和时间 目录 Java 日期和时间 Java 日期和时间 学习自 http://blog.csdn.net/zjf280441589/article/details/50447533 Date类 Date 类 ...