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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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的Yii框架中的缓存功能
2016/03/29 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
一分钟理解js闭包
2016/05/04 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python找出9个连续的空闲端口
2016/02/01 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
大学生就业求职信
2014/06/12 职场文书
森林防火标语
2014/06/23 职场文书
敬老月活动总结
2014/08/28 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
python自动化测试之Selenium详解
2022/03/13 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技