为table添加行和列

  1 ＜html xmlns="http://www.w3.org/1999/xhtml" ＞
  2 ＜head runat="server"＞
  3     ＜title＞AddRow＜/title＞
  4     ＜style type="text/css"＞
  5         .BlackBorder{ background-color:#000; font-size:12px;}
  6         .BlackBorder tr{ background-color:#fff;}
  7     ＜/style＞
  8 ＜/head＞
  9 ＜body＞
 10     ＜form id="form1" runat="server"＞
 11     ＜div＞
 12         ＜table width="400px"＞
 13             ＜tr＞
 14                 ＜td＞
 15                     姓名：
 16                     ＜input id="txtName" style="width:100px;" /＞  
 17                     年龄：
 18                     ＜input id="txtAge" style="width:50px;"  /＞  
 19                     ＜input id="txtAdd" type="button" value="新增" οnclick="return insertRow()"/＞
 20                 ＜/td＞
 21             ＜/tr＞
 22             ＜tr＞
 23                 ＜td＞
 24                     ＜table id="tMemInfo" width="100%" class="BlackBorder" cellpadding="0" cellspacing="1" border="0" style="padding-left:5px;"＞
 25                         ＜tr style=" background-color:#E0E0E0;"＞
 26                             ＜td style="width:150px;"＞
 27                                 姓名
 28                             ＜/td＞
 29                             ＜td style="width:100px;"＞
 30                                 年龄
 31                             ＜/td＞
 32                             ＜td＞
 33                                 管理
 34                             ＜/td＞
 35                         ＜/tr＞
 36                     ＜/table＞
 37                 ＜/td＞
 38             ＜/tr＞
 39         ＜/table＞
 40         
 41     ＜/div＞
 42     ＜/form＞
 43     
 44 ＜script type="text/javascript"＞
 45
 46 function insertRow()
 47 {
 48     
 49     var name=document.getElementById("txtName").value;
 50     var age=document.getElementById("txtAge").value;
 51     
 52     if(name=="")
 53     {
 54         alert("請填寫姓名");
 55         document.getElementById("txtName").focus();
 56         return false;
 57     }
 58     if(age=="")
 59     {
 60         alert("請填寫年龄");
 61         document.getElementById("txtAge").focus();
 62         return false;
 63     }
 64
 65     var myTable=document.getElementById("tMemInfo");
 66     var objRow = myTable.insertRow(1); 
 67     var objCell = objRow.insertCell(0);  
 68     objCell.innerHTML= "＜input type='text' style='width:100px;' style='display:none'/＞＜span ＞"+name+"＜/span＞";
 69     var objCell = objRow.insertCell(1); 
 70     objCell.innerHTML="＜input type='text' style='width:50px;'  style='display:none'/＞＜span ＞"+age+"＜/span＞";
 71     var objCell = objRow.insertCell(2);
 72     objCell.innerHTML=" ＜input type='button' value='取消' οnclick='cancel()' style='display:none'/＞ "+
 73                       " ＜input type='button' value='儲存' οnclick='save()' style='display:none'/＞" +
 74                       " ＜input type='button' value='修改' οnclick='edit()'  /＞" +
 75                       " ＜input type='button' value='删除' οnclick='deleteRow()' /＞";
 76                       
 77     document.getElementById("txtName").value="";
 78     document.getElementById("txtAge").value="";
 79     document.getElementById("txtName").focus();
 80 }
 81
 82 //删除行
 83 function deleteRow()
 84 {
 85     var myTable=document.getElementById("tMemInfo");
 86     var trList =myTable.getElementsByTagName("tr");
 87     var row = 0;
 88     for(var i = 0; i ＜ trList.length ; i++)
 89     {
 90         if(event.srcElement.parentNode.parentNode == trList[i])
 91             row = i;
 92     }
 93     myTable.deleteRow(row);
 94 }
 95
 96 function cancel()
 97 {
 98     var e=event.srcElement.parentElement.parentElement;
 99     e.childNodes[0].childNodes[0].style.display="none";
100     e.childNodes[0].childNodes[1].style.display="";
101     e.childNodes[1].childNodes[0].style.display="none";
102     e.childNodes[1].childNodes[1].style.display="";
103     e.childNodes[2].childNodes[0].style.display="none";
104     e.childNodes[2].childNodes[2].style.display="none";
105     e.childNodes[2].childNodes[4].style.display="";
106     e.childNodes[2].childNodes[6].style.display="";
107     
108 }
109
110 function save()
111 {
112     var e=event.srcElement.parentElement.parentElement;
113     e.childNodes[0].childNodes[0].style.display="none";
114     e.childNodes[0].childNodes[1].style.display="";
115     e.childNodes[1].childNodes[0].style.display="none";
116     e.childNodes[1].childNodes[1].style.display="";
117     e.childNodes[2].childNodes[0].style.display="none";
118     e.childNodes[2].childNodes[2].style.display="none";
119     e.childNodes[2].childNodes[4].style.display="";
120     e.childNodes[2].childNodes[6].style.display="";
121     e.childNodes[0].childNodes[1].innerHTML=e.childNodes[0].childNodes[0].value;
122     e.childNodes[1].childNodes[1].innerHTML=e.childNodes[1].childNodes[0].value;
123 }
124
125 function edit()
126 {
127     var e=event.srcElement.parentElement.parentElement;
128     e.childNodes[0].childNodes[0].style.display="";
129     e.childNodes[0].childNodes[1].style.display="none";
130     e.childNodes[1].childNodes[0].style.display="";
131     e.childNodes[1].childNodes[1].style.display="none";
132     e.childNodes[2].childNodes[0].style.display="";
133     e.childNodes[2].childNodes[2].style.display="";
134     e.childNodes[2].childNodes[4].style.display="none";
135     e.childNodes[2].childNodes[6].style.display="none";
136     e.childNodes[0].childNodes[0].value=e.childNodes[0].childNodes[1].innerHTML;
137     e.childNodes[1].childNodes[0].value=e.childNodes[1].childNodes[1].innerHTML;
138 }
139 ＜/script＞
140 ＜/body＞
141 ＜/html＞
142

转载于:https://www.cnblogs.com/lfzwenzhu/archive/2009/07/10/1520591.html