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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javaScript对象和属性的创建方法
Jan 15 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
js实现录音上传功能
Nov 22 Javascript
原生javascript如何实现共享onload事件
Jul 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP xpath()函数讲解
2019/02/11 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
Python动态加载模块的3种方法
2014/11/22 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
使用python实现ANN
2017/12/20 Python
python之pandas用法大全
2018/03/13 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
2014新年寄语
2014/01/20 职场文书
土木工程求职信
2014/05/29 职场文书
公司活动总结范文
2014/07/01 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL