js添加删除行和双击变文本框的脚本
来源:互联网 发布:win7桌面数字时钟软件 编辑:程序博客网 时间:2024/05/22 07:56
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添加删除行和双击变文本框-www.jbxue.com</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>
- js添加删除行和双击变文本框的脚本
- js添加删除行和双击变文本框
- js添加删除文本框
- js添加删除文本框
- 动态添加删除表格行的js脚本
- HTML文本框添加和删除
- jquery对文本框动态的添加和删除
- 脚本:添加和删除table的行列。
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- 用javascript动态添加和删除文本框
- 双击文字出现编辑文本框的JS代码
- js动态的添加删除表格的行和列
- js动态的添加删除表格的行和列
- 用js添加table的行和删除行
- js简单的表格添加行和删除行操作.
- 关于JS添加table行和删除行的问题
- GridView前台行的添加和删除(JS操作)
- GridView前台行的添加和删除(JS操作)
- HDU-1241 Oil Deposits (DFS)
- HDU-2952 Counting Sheep (DFS)
- try_to_extend_reservation
- javascript一元操作符(递增、递减)使用示例
- HDU-1518 Square(DFS)
- js添加删除行和双击变文本框的脚本
- javascript的内存管理详解
- 探讨3DSMAX 中的CS骨骼动画插件
- 四条直线连接九个点
- 骨骼动画公式
- 3DSMAX 中的CS 骨骼动画插件初探
- 命令设计模式
- 解决 Mac 从睡眠恢复后没有声音的问题
- 访问者设计模式