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 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
js如何打印object对象
Oct 16 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
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
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js实现日期级联效果
2014/01/23 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Python中使用ElementTree解析XML示例
2015/06/02 Python
python协程用法实例分析
2015/06/04 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
浅析Python requests 模块
2020/10/09 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
行政总监岗位职责
2013/12/05 职场文书
中等生评语大全
2014/05/04 职场文书
安全生产标语
2014/06/06 职场文书
中职招生先进个人材料
2014/08/31 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
民事答辩状格式范文
2015/05/21 职场文书
植物园观后感
2015/06/11 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server