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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript 特殊字符
Apr 05 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS前端广告拦截实现原理解析
Feb 17 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
PHP中创建并处理图象
2006/10/09 PHP
php强制运行广告的方法
2014/12/01 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
jQuery中index()的用法分析
2014/09/05 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
JS高级运动实例分析
2016/12/20 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
网络技术支持面试题
2013/04/22 面试题
大学生求职自我评价
2014/01/16 职场文书
简历上的自我评价
2014/02/03 职场文书
体育节口号
2014/06/19 职场文书
导游词之镇江焦山
2019/11/21 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Tomcat配置访问日志和线程数
2022/05/06 Servers