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

更新時(shí)間：2008年07月22日 23:05:40 作者：

發(fā)現(xiàn)我JS真的還有很多要學(xué)，下面只是我的練習(xí)作品，代碼很多是網(wǎng)上的。

<!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添加刪除行和雙擊變文本框---阿會楠練習(xí)作品</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){         //構(gòu)造函數(shù)         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.dhdzp.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; // 保存正在編輯的單元格          //轉(zhuǎn)成文本     function changeToText(obj){         if( obj && inputItem ) {             // 如果存在正在編輯的單元格， 則取消編輯狀態(tài)， 并將編輯的數(shù)據(jù)保存起來             var str = " ";             if(inputItem.value != "")                  str = inputItem.value;             obj.innerText = str;            }     }          //轉(zhuǎn)成編輯     function changeToEdit(obj){          if( !inputItem ) {               inputItem = document.createElement('input');               inputItem.type = 'text';               inputItem.style.width = '100%';          }         // inputItem.style.display = '';          inputItem.value = obj.innerText; // 將該單元格的數(shù)據(jù)文本讀到控件上          obj.innerHTML = ''; // 清空單元格的數(shù)據(jù)          obj.appendChild(inputItem);          inputItem.focus();          activeItem = obj;     }               //雙擊時(shí)文本變成文本框     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;         }     }          //單擊時(shí)文本框變成文本     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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: