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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
Yii2.0表关联查询实例分析
2016/07/18 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
洗发露广告词
2014/03/14 职场文书
会计的岗位职责
2014/03/15 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年应急工作总结
2014/12/11 职场文书
党支部书记岗位职责
2015/02/15 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android