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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
python脚本替换指定行实现步骤
2017/07/11 Python
python安装Scrapy图文教程
2017/08/14 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
django修改models重建数据库的操作
2020/03/31 Python
django中嵌套的try-except实例
2020/05/21 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python中xlrd模块的使用详解
2021/02/01 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
十佳家长事迹材料
2014/08/26 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
团员个人总结
2015/02/26 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
中学语文教学反思
2016/02/16 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电