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 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
uniapp实现可滑动选项卡
Oct 21 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 分页函数multi() discuz
2009/06/21 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP模板解析类实例
2015/07/09 PHP
php实现的xml操作类
2016/01/15 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
JavaScript 基本概念
2015/01/20 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python中创建二维数组
2018/10/17 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
音乐幼师求职信
2014/07/09 职场文书
2014年政工师工作总结
2014/12/18 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书