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" 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" 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>?