jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015-11-25 11:59
1371 查看
本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法。分享给大家供大家参考,具体如下:
JS鼠标双击事件 onDblClick
<td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td>
这里的本人用绑定的值是传的当前行对应的ID号
function ShowElement(element, productid, flag, ishotorcommend) { if (flag == 0 && ishotorcommend == 0) { alert("请先设置该产品为推荐"); return; } if (flag == 1 && ishotorcommend == 0) { alert("请先设置该产品为热销"); return; } var oldhtml = element.innerHTML;//原单元格里的值 var str = "<input type='text' name='test' style='width:50%;'"; str += "onkeypress='return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46'"; str += "onpaste='return !clipboardData.getData('text').match(/\D/)'"; str += "ondragenter='return false' />"; var newobj = document.createElement(str); //创建新的input元素 newobj.setAttribute("value", oldhtml);//把原来单元格中的值赋给文本框 newobj.onblur = function() { element.innerHTML = this.value ? this.value : oldhtml; //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值 var sort = element.innerHTML; $.get("UpdateFlag.ashx?sort=" + sort + "&&productid=" + productid + "&&flag=" + flag, function(data) { }); } element.innerHTML = ''; element.appendChild(newobj);//把新的值赋到单元格 newobj.focus(); }
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jquery实现的鼠标拖动排序Li或Table
- jQuery实现table隔行换色和鼠标经过变色的两种方法
- jquery实现table鼠标经过变色代码
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- jQuery插件dataTables添加序号列的方法
- JQuery动态给table添加、删除行 改进版
- jquery获取table中的某行全部td的内容方法
- jquery遍历table的tr获取td的值实现方法
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery实现获取table中鼠标click点击位置行号与列号的方法
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 表格标签table深入了解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法