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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
Underscore源码分析
Dec 30 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
eslint 的三大通用规则详解
May 16 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 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
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
用于table内容排序
2006/07/21 Javascript
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue实现分页加载效果
2019/12/24 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python开发编码规范
2006/09/08 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
利用python修改json文件的value方法
2018/12/31 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python可迭代对象去重实例
2020/05/15 Python
Python 防止死锁的方法
2020/07/29 Python
详解python UDP 编程
2020/08/24 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
为什么使用接口?
2014/08/13 面试题
恐龙的灭绝教学反思
2014/02/12 职场文书
设计师求职信模板
2014/05/06 职场文书
应届生求职信范文
2014/06/30 职场文书
影视广告专业求职信
2014/09/02 职场文书
迟到检讨书
2015/01/26 职场文书
英语教师个人工作总结
2015/02/09 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
详解Vue的options
2021/05/15 Vue.js