js实现双击单元格变成文本输入框效果代码

单击单元格，将其变为文本框

// 将单元格转化成文本框
function changeTotext(obj)
{
var tdValue = obj.innerText;
obj.innerText = "";
var txt = document.createElement("input");
txt.type = "text";
txt.value = tdValue;
txt.id = "_text_000000000_";
txt.setAttribute("className","text");
obj.appendChild(txt);
txt.select();
//obj.style.border = "1px dashed #ff9900";
}
// 取消单元格中的文本框，并将文本框中的值赋给单元格
function cancel(obj)
{
var txtValue = document.getElementById("_text_000000000_").value;
obj.innerText = txtValue;
}
/*********************************************/
// 事件
document.ondblclick = function()
{
if (event.srcElement.tagName.toLowerCase() == "td")
{
changeTotext(event.srcElement);
}

}
document.onmouseup = function()
{
if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_")
{
var obj = document.getElementById("_text_000000000_").parentElement;
cancel(obj);
}
}

dblclick      
       
       
       
       

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS实现鼠标单击与双击事件共存

    一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • JS实现的页面自定义滚动条效果

    JS实现的页面自定义滚动条效果

    本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D

  • js修改table中Td的值(定义td的双击事件)

    客户需求至上. 这次是更改后的代码,去掉了"确定","取消"按钮.变单击为双击事件,用户按ESC键,取消更改. 复制代码 代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById("tbmain"); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加. for(var i=1;i<tbmain.row

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • js jq 单击和双击区分示例介绍

    一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick: 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会.也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果

  • js实现双击图片放大单击缩小的方法

    本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

  • JS实现双击屏幕滚动效果代码

    JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码.分享给大家供大家参考,具体如下: 这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/ 具体代码如下: <html> <SCRIPT language=JavaScript> var currentpos,ti

  • js控制多图左右滚动切换效果代码分享

    js控制多图左右滚动切换效果代码分享

    本文实例讲述了js控制多图左右滚动切换效果.分享给大家供大家参考.具体如下: 这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js控制多图左右滚动切换效果代码如下 <head> <meta http-equiv="Content-Type"

  • Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

  • js实现双击单元格变成文本输入框效果代码

    单击单元格,将其变为文本框 // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"

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

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

  • 点击单元格后可编辑单元格内文本如何制作

    如何通过JAVASCRIPT实现当点击相应的单元格,该单元格内文本变成可编辑的INPUT或SELECT,离开单元格后又单元格内文本为修改后文本.我通过以下方法来实现点击单元格变成INPUT,可不知该在点其它单元格后恢复文本状态和如何返回INPUT后修改的值.是否有更好的方法来实现该效果. window.attachEvent("onload", getTable); function getTable(){ for(i=0; i' tbl.cells[i].innerHTML = ht

  • 当编辑框内容改变 对应的单元格也随着改变vba代码

    当编辑框内容改变,对应的单元格也随着改变 复制代码 代码如下: Private Sub TextBox1_Change() ThisWorkbook.ActiveSheet.Range("J1") = TextBox1.Text End Sub 利用这个代码可以写很多自动计算的Excel小模块了

  • Android实现类似微信的文本输入框 效果

    Android实现类似微信的文本输入框 效果

    本文内容比较简单,给大家介绍一下微信的文本输入框是如何实现的,其实那只是个普通的文本框设了一个特殊的背景而已.具体微信怎么实现的,大家可以反编译下,这里介绍下如何实现这个背景. 可以先看下文章末尾的效果图,里面的文本框是不是和微信的比较像啊,下面说下实现思想: 首先,这种效果用.9图我不知道是否可以做出来.如果不用.9图的话,那就只能用drawable来写,这种drawable有点复杂,可以采用LayerList来实现,我的思想如下: 分三层实现,这里假设activity的背景是白色,第一层也(

  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • JS基于VML技术实现的五角星礼花效果代码

    JS基于VML技术实现的五角星礼花效果代码

    本文实例讲述了JS基于VML技术实现的五角星礼花效果代码.分享给大家供大家参考,具体如下: 这里演示的五角星礼花,基于HTML+js+VML技术共同编写实现,打开页面即可看到礼花绽放效果,五角星符号可以换成其它的符号,本效果可轻松修改成烟花升空爆炸特效,不过你要事先制作一个烟花的GIF小图,然后替换掉五角星. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/ 具体代码如下: <HTML> <HE

  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

  • js实现类似菜单风格的TAB选项卡效果代码

    js实现类似菜单风格的TAB选项卡效果代码

    本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

随机推荐