JS example:点击按钮table增加一行,删除一行(转载)

点击添加按钮给table增加一行,有两种方法,一种是通过js控制添加;另一种就是直接用html元素和innerHTML,在这里我主要是说的用js来控制,因为这种易于调整。在这里要了解的这几个知识点, appendChild, firstChild, cloneNode(false or true), chidNodes, childNodes[i], style = “display:none”, innerHTML , toString(), typeof.nowrap,size(input框显示大小),maxlength(input框输入大小)思路:
1 显示table
2 模板table(隐藏style=“display:none”)
3 点击添加按钮触发事件
将模板table的一行添加到显示table中去
(table1.firstChild.appendChild(table2.firstChild.firstChild.cloneNode(true)))
例子:

    <script>  
   //给table增加一行  
   function addTableRow() {  
   var table1 = document.getElementById('table1');  
   var cloneTab = document.getElementById('table2');  
   //alert(cloneTab.firstChild.firstChild.innerHTML);  
   //alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);  
   table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));  
   
   var v= table1.firstChild.childNodes;  
   var len = v.length;  
   for(var i=1;i<len;i++){  
   v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值  
   }  
   }  
   
   //给table删除一行  
   function delTableRow(){  
   var table1 = document.getElementById('table1');  
   var isChecked = document.getElementsByName('isChecked');  
   var len = isChecked.length;  
   for(var i=len-1;i>=0;i--){  
   if(isChecked[i].checked==true){  
   table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);  
   //alert(isChecked[i].id);  
   //alert(isChecked[i].parentNode.parentNode.innerHTML);  
   }  
   }  
   }  
   </script>  
   
   《  
   <!--显示table-->  
   <table border="0" cellpadding="0" cellspacing="0" class="datalist" id="table1">  
   <tr>  
   <th width="38" nowrap="nowrap" style="width: 5%">0</th>  
   <th width="38" nowrap="nowrap" >00</th>  
   <th width="79" nowrap="nowrap" scope="col">1</th>  
   <th width="70" nowrap="nowrap" scope="col">2</th>  
   <th width="69" nowrap="nowrap" scope="col">3</th>  
   <th width="66" nowrap="nowrap" scope="col">4</th>  
   <th width="94" nowrap="nowrap" scope="col">5</th>  
   <th width="107" nowrap="nowrap" scope="col">6</th>  
   </tr>  
   </table>  
   
   <!--控制table的按钮-->  
   <table>  
   <tr align="center">  
   <td colspan="10">  
   <input type="button"  value="增加" onclick= "addTableRow();"/>   
   <input type="button"  value="删除" onclick="delTableRow();"/>  
   </td>  
   </tr>  
   </table>  
   
   <!--模板table也叫做clone table style = "display:none"-->  
   <table id='table2' style="display: none">  
   <tr>  
   <th><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th>  
   <th width="38" nowrap="nowrap" style="width: 5%"><input type="text" size="16" maxlength="50" value=""/></th>  
   <th width="79" nowrap="nowrap" scope="col"><input type="text"  size="16" maxlength="50" value=""/></th>  
   <th width="70" nowrap="nowrap" scope="col"><input type="text"  size="6" maxlength="10" value=""/></th>  
   <th width="69" nowrap="nowrap" scope="col">  
   <select size="1">  
   <option value="">请选择...</option>  
   <option value="1">1</option>  
   <option value="2">1</option>  
   </select>  
   </th>  
   <td width="100" nowrap="nowrap" scope="col"><input type="text"  class="date150"/></td>  
   <th width="94" nowrap="nowrap"  scope="col"><input type="text"  size="16" maxlength="50" value=""/></th>  
   <th width="71" nowrap="nowrap"  scope="col"><input type="text"  size="16" maxlength="50" value=""/></th>  
   </tr>  
   </table>