js添加刪除行和雙擊變文本框的腳本

2019-11-21 01:41:07

字體：大中小

來源：轉載

供稿：網友

<!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 = "武林網 m.survivalescaperooms.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需刷新才能執行]

上一篇：JavaScript 版本自動生成文章摘要

下一篇：javascript 支持ie和firefox杰奇翻頁函數