jquery实现点击文字可编辑并修改保存至数据库


Posted in Javascript onApril 15, 2014

这个方法网上可以查到很多,但是好多只有点击文字编辑并保持,但是没有完整的代码写怎么保存到数据库。因为本人才疏学浅,费啦好长时间才写好把修改的内容只用一条sql语句保存到数据库,今天在这里和大家分享

这是运行图片
jquery实现点击文字可编辑并修改保存至数据库 
这是前台页面 03.aspx页面

<table id="MyTable" cellspacing="1" cellpadding="3"> 
<asp:Repeater ID="reorderInFo" runat="server"> 
<ItemTemplate> 
<tr style="text-align: left;"> 
<td width="70" height="40" id="OrderName"> 
订单名称: 
</td> 
<td colspan="5" class="caname" id="OrderName1"> 
<%#Eval("OrderName")%> 
</td> 
</tr> 
<tr style="text-align: left;"> 
<td width="70" height="40" id="ID_Product"> 
产品类型: 
</td> 
<td class="caname" id="ID_Product1"> 
<%#Eval("ID_Product")%> 
</td> 
<td width="40" id="OrderState_Send"> 
状态: 
</td> 
<td class="caname" id="OrderState_Send1" ><%#Eval("OrderState_Send")%> 
</td> 
<td width="40" id="OrderQty"> 
印量: 
</td> 
<td class="caname" id="OrderQty1" ><%#Eval("OrderQty")%> 
</td> 
</tr> 
<tr> 
<td width="70" height="60" id="SendAddress"> 
收货信息: 
</td> 
<td colspan="5" class="caname" id="SendAddress1" ><%#Eval("SendAddress")%> 
</td> 
</tr> 
<tr style="text-align: left;"> 
<td width="70" height="50" id="OrderMoney_Total"> 
总金额: 
</td> 
<td colspan="5" class="caname" id="OrderMoney_Total1" ><%#Eval("OrderMoney_Total")%> 
</td> 
</tr> </ItemTemplate> 
</asp:Repeater> 
</table>

这是js 03.js
$(function () { 
//获取class为caname的元素 
$(".caname").click(function () { 
var td = $(this); 
var txt = $.trim(td.text()); 
var input = $("<input type='text'value='" + txt + "'/>"); 
td.html(input); 
input.click(function () { return false; }); 
//获取焦点 
input.trigger("focus"); 
//文本框失去焦点后提交内容,重新变为文本 
input.blur(function () { 
var newtxt = $(this).val(); 
//判断文本有没有修改 
if (newtxt != txt) { 
td.html(newtxt); //不需要使用数据库的这段可以不需要 
//var Order_Id = $("#ID_Order").text(); 
var updateCol = $.trim(td.prev().attr("id"));//我重点要说的是着一句:td.prev();表示本td的上一个td。这句代码的意思是你所点击的td的上一个td的id(如果不明白可以看前面的03.aspx页面)。 
//ajax异步更改数据库,加参数date是解决缓存问题 
url = "../test/03.ashx?caname=" + newtxt + "&updateCol=" + updateCol + "&date=" + new Date(); 


//使用get()方法打开一个一般处理程序,data接受返回的参数(在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");) 
//数据库的修改就在一般处理程序中完成 
$.get(url, function (data) { 
// if (data == "1") { 
// alert("该类别已存在!"); 
// td.html(txt); 
// return; 
// } 
// alert(data); 
alert("修改成功"); 
td.html(newtxt); 
});

<p><span style="font-size:14px;">这是一般处理程序页面<span style="font-family:Times New Roman;"> 03.ashx</span></span></p><p> 
<%@ WebHandler Language="C#" Class="_03" %></p>

<p>using System; 
using System.Web; 
using System.Data.SqlClient;</p><p>public class _03 : IHttpHandler { public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
int OrderId = 5;</p><p> string newOrderName = context.Request.QueryString["caname"];//获取用户修改后的文字 
string updateCol = context.Request.QueryString["updateCol"];//获取用户修改的本td的上一个td的id的值(这个id与数据库中的列名相同) 
string sql = "update eoPrintOrder set " + updateCol + " <a target="_blank" href="mailto:=@name">=@name</a> where <a target="_blank" href="mailto:Id_order=@id';//">Id_order=@id";//</a>通过这一条sql语句,就可以对数据库进行修改 SqlParameter[] pams = { 
new SqlParameter("@name",newOrderName), 
new SqlParameter("@id",OrderId) 
}; 

string data = DscySFL.DbHelp.ExecuteCommand(sql,pams ).ToString(); 
context.Response.Write(data); 
} 
public bool IsReusable { 
get { 
return false; 
} 
}</p><p>}</p>
Javascript 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 #Javascript
JS比较2个日期间隔的示例代码
Apr 15 #Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 #Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 #Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 #Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 #Javascript
jquery datepicker参数介绍和示例
Apr 15 #Javascript
You might like
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
个人自我鉴定
2013/11/07 职场文书
学术会议主持词
2014/03/17 职场文书
公民代理授权委托书
2014/09/24 职场文书
老公出轨后的保证书
2015/05/08 职场文书
千手观音观后感
2015/06/03 职场文书
埃及王子观后感
2015/06/16 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android