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需再刷新一下页面才能执行]

您可能感兴趣的文章:

BootStrap中Tab页签切换实例代码
这篇文章主要介绍了BootStrap中Tab页签切换实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
基于Asp.net与Javascript控制的日期控件
使用Asp.net+Javascript控制的日期控件，需要的朋友可以参考下。
2010-05-05
Js生成随机数/随机字符串的方法小结【5种方法】
这篇文章主要介绍了Js生成随机数/随机字符串的方法,结合实例形式总结分析了5种Js生成随机数/随机字符串的操作技巧,需要的朋友可以参考下
2020-05-05
浅谈javascript中的call、apply、bind
这篇文章主要为大家详细介绍了javascript中的call、apply、bind方法，感兴趣的朋友可以参考一下
2016-03-03
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Add a Formatted Table to a Word Document
Add a Formatted Table to a Word Document...
2007-06-06
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
这篇文章主要介绍了JS移动端/H5同时选择多张图片上传并使用canvas压缩图片,需要的朋友可以参考下
2017-06-06
Javascript实现base64的加密解密方法示例
下文是base64用javascript写出来的函数和方法。非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-06-06
javascript控制在光标位置插入文字适合表情的插入
使用javascript控制在光标位置插入文字，在实现表情的插入时会用到的,需要的朋友可以参考下
2014-06-06
详解JS实现简单的时分秒倒计时代码
这篇文章主要介绍了JS时分秒倒计时的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04