jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法


Posted in Javascript onNovember 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
谈一谈javascript闭包
Jan 28 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
You might like
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php header功能的使用
2013/10/28 PHP
php 生成短网址原理及代码
2014/01/23 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
JS实现字体背景跑马灯
2020/01/06 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
pygame实现五子棋游戏
2019/10/29 Python
np.random.seed() 的使用详解
2020/01/14 Python
通过代码实例了解Python异常本质
2020/09/16 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
购房协议书范本
2014/04/11 职场文书
保密工作目标责任书
2014/07/28 职场文书
婚庆主持词大全
2015/06/30 职场文书
导游词之唐山景点
2019/12/18 职场文书