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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
js正则表达式简单校验方法
Jan 03 Javascript
基于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
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
js href的用法
2010/05/13 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python调用java的Webservice示例
2014/03/10 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python使用Matplotlib画饼图
2018/09/25 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python如何对XML 解析
2020/06/28 Python
C语言面试题
2013/05/19 面试题
人事任命书格式
2014/06/05 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
银行贷款收入证明
2014/10/17 职场文书
培训感想范文
2015/08/07 职场文书
导游词之青城山景区
2019/09/27 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
python通过opencv调用摄像头操作实例分析
2021/06/07 Python