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 相关文章推荐
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
微信小程序位置授权处理方法
Jun 13 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
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python正则实现提取电话功能
2018/02/24 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python小进度条显示代码
2019/03/05 Python
Python实现快速排序的方法详解
2019/10/25 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
资深生产主管自我评价
2013/09/22 职场文书
公司请假条范文
2014/04/11 职场文书
跳蚤市场口号
2014/06/13 职场文书
环卫工作汇报材料
2014/10/28 职场文书
投标邀请书范本
2015/02/02 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
节约用水广告语60条
2019/11/14 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS