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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
使用php清除bom示例
2014/03/03 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
prototype1.4中文手册
2006/09/22 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
基于Vue过渡状态实例讲解
2017/09/14 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python简单实现基数排序算法
2015/05/16 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python中的常量和变量代码详解
2018/07/25 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python3离线安装Requests模块问题
2019/10/13 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
房地产营销策划方案
2014/02/08 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
继续教育个人总结
2015/03/03 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书