博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery实现鼠标双击Table单元格变成文本框,输入内容并更新到数据库
阅读量:6282 次
发布时间:2019-06-22

本文共 1217 字,大约阅读时间需要 4 分钟。

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 
+=
 
"
οnkeypress='return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46'
"
;
    str 
+=
 
"
οnpaste='return !clipboardData.getData('text').match(/\D/)'
"
;
    str 
+=
 
"
οndragenter='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();
}

 

 

转载于:https://www.cnblogs.com/yinpeng186/archive/2011/09/16/2178983.html

你可能感兴趣的文章
迷人的卡耐基说话术
查看>>
PHP导出table为xls出现乱码解决方法
查看>>
PHP问题 —— 丢失SESSION
查看>>
Java中Object类的equals()和hashCode()方法深入解析
查看>>
数据库
查看>>
Vue------第二天(计算属性、侦听器、绑定Class、绑定Style)
查看>>
dojo.mixin(混合进)、dojo.extend、dojo.declare
查看>>
Python 数据类型
查看>>
iOS--环信集成并修改头像和昵称(需要自己的服务器)
查看>>
PHP版微信权限验证配置,音频文件下载,FFmpeg转码,上传OSS和删除转存服务器本地文件...
查看>>
教程前言 - 回归宣言
查看>>
PHP 7.1是否支持操作符重载?
查看>>
Vue.js 中v-for和v-if一起使用,来判断select中的option为选中项
查看>>
Java中AES加密解密以及签名校验
查看>>
定义内部类 继承 AsyncTask 来实现异步网络请求
查看>>
VC中怎么读取.txt文件
查看>>
如何清理mac系统垃圾
查看>>
企业中最佳虚拟机软件应用程序—Parallels Deskto
查看>>
Nginx配置文件详细说明
查看>>
怎么用Navicat Premium图标编辑器创建表
查看>>