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的ready方法详解
Nov 27 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
js实现分页功能
May 24 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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 Undefined index报错的修复方法
2011/07/17 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
js字符串转成JSON
2013/11/07 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
js验证密码强度解析
2020/03/18 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python的help函数如何使用
2020/06/11 Python
一个大学生十年的职业规划
2014/01/17 职场文书
八年级美术教学反思
2014/02/02 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
职务聘任书范文
2014/03/29 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
常住证明范本
2015/06/23 职场文书
毕业设计工作总结
2015/08/14 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
JavaScript实现两个数组的交集
2022/03/25 Javascript