js添加删除行和双击变文本框的脚本

更新时间：2008年07月22日 23:05:40 作者：

发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>js添加删除行和双击变文本框---阿会楠练习作品</title>     <style type="text/css">     *{         font-size:12px;     }     #myTable{         background:#D5D5D5;         color:#333333;     }          #myTable tr{         background:#F7F7F7;     }     #myTable tr th{         height:20px;         padding:5px;     }     #myTable tr td{         padding:5px;     }     </style>     <script type="text/javascript">     function $(obj){         return document.getElementById(obj);     }          var num = 0;     function row(id){         //构造函数         this.id = $(id);     }     row.prototype = {         //插入行         insert:function(){             num = num + 1;             var newTr = this.id.insertRow(-1);             var td_1 = newTr.insertCell(0);             var td_2 = newTr.insertCell(1);             var td_3 = newTr.insertCell(2);             td_1.innerHTML = num;             td_2.innerHTML = "脚本之家 www.jb51.net";             td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";         },         //删除行         del:function(obj){             var i = obj.parentNode.parentNode.rowIndex;             this.id.deleteRow(i);         }     }            function addRow(){         var row2 = new row("myTable");         row2.insert();     }          function delRow(obj){          var row1 = new row("myTable");         row1.del(obj);     }          var inputItem; // 输入框句柄     var activeItem; // 保存正在编辑的单元格          //转成文本     function changeToText(obj){         if( obj && inputItem ) {             // 如果存在正在编辑的单元格， 则取消编辑状态， 并将编辑的数据保存起来             var str = " ";             if(inputItem.value != "")                  str = inputItem.value;             obj.innerText = str;            }     }          //转成编辑     function changeToEdit(obj){          if( !inputItem ) {               inputItem = document.createElement('input');               inputItem.type = 'text';               inputItem.style.width = '100%';          }         // inputItem.style.display = '';          inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上          obj.innerHTML = ''; // 清空单元格的数据          obj.appendChild(inputItem);          inputItem.focus();          activeItem = obj;     }               //双击时文本变成文本框     document.ondblclick = function(){         if(event.srcElement.tagName.toLowerCase() == "td"){             if(!inputItem){                 inputItem = document.createElement("input");                 inputItem.type = "text";                 inputItem.style.width = "100%";             }             changeToText();             changeToEdit(event.srcElement);         }else{             event.returnValue = false;             return false;         }     }          //单击时文本框变成文本     document.onclick = function(){         if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem)             return;         else             changeToText(activeItem);     }     </script> </head> <body> <input type="button" onclick="addRow()" value="插入一行" /> <table id="myTable" border="0" cellpadding="0" cellspacing="1"> <tr><th>编号</th><th>姓名</th><th>操作</th></tr> </table> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js限制checkbox选中个数以限制六个为例
需要展示多个checkbox复选框，而只能允许最多选6个,下面为大家介绍下如何使用js限制checkbox选中个数,需要的朋友可以参考下
2014-07-07
js中的事件委托或是事件代理使用详解
这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的,需要的朋友可以参考下
2017-06-06
js的OOP继承实现(必看篇)
下面小编就为大家带来一篇js的OOP继承实现(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JS+HTML5 canvas绘制验证码示例
这篇文章主要介绍了JS+HTML5 canvas绘制验证码,结合实例形式分析了HTML5 canvas图形绘制相关操作技巧,需要的朋友可以参考下
2018-12-12
Bootstrap基本布局实现方法详解
这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
javascript 支持ie和firefox杰奇翻页函数
杰奇小说系统用到的翻页函数，支持firefox，官方自带的模板不支持，这样大家就可以用firefox浏览网页了，在网页木马横行的今天，firefox比ie要安全不少
2008-07-07
javascript 四十条常用技巧大全
本文给大家整理了有关js四十条常用技巧，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
JavaScript结合Bootstrap仿微信后台多图文界面管理
这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
不错的JS中变量相关的细节分析
不错的JS中变量相关的细节分析...
2007-08-08
用cssText批量修改样式
一般情况下我们用js设置元素对象的样式会使用这样的形式
2009-08-08

js添加删除行和双击变文本框的脚本

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具