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

来源：动视网责编：小采时间：2020-11-27 20:39:47

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

js添加删除行和双击变文本框的脚本_javascript技巧: js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:

推荐度：

点击下载本文 文档为doc格式

导读js添加删除行和双击变文本框的脚本_javascript技巧: js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:

<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> 
  
 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.gxlcms.com"; 
 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添加删除行和双击变文本框的脚本_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：技巧 js javascript

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐