JS动态添加删除表格行

  1 <html>   
  2       <head></head>   
  3 ----------------实例1---------------
  4       <script       language="javascript">   
  5       function       add()   
  6       {   
  7           var       myTable       =       document.getElementById("aa");   
  8           var       newRow       =       aa.insertRow(aa.rows.length);   
  9           var       newTd1       =       newRow.insertCell(0);   
 10           newTd1.innerText="lala";     
 11           var       newTd2       =       newRow.insertCell(1);   
 12        newTd2.bgColor="#F2F2F2";
 13           newTd2.innerText="^_^";   
 14       }   
 15       function del1()
 16       {
 17        aa.deleteRow(aa.rows.length-1);
 18       }
 19       </script>   
 20 <body>   
 21       <table       id="aa"       border="1"       bordercolor="black"       style="border-collapse:       collapse"       width="20%">   
 22       <tr>   
 23       <td       width="38%">&nbsp;</td>   
 24       <td       width="62%">&nbsp;</td>   
 25       </tr>   
 26 </table>   
 27       <input       type="button"       value="addrow"       onclick="add();">   
 28       <input       type="button"       value="delete"       onclick="del1();"> 
 29 <br>
 30 ------------实例2-----------
 31 <form>   
 32       <input       type="button"       onclick="addline()"       value="增加一行">   
 33       <table       border="1"       id="test">       
 34           <tr>   
 35               <td       colspan="2"><input       type="text"       name="tt[]"></td>   
 36           </tr>   
 37       </table>   
 38       <input       type="submit">   
 39 </form>   
 40       <script>   
 41       function       addline(content){   
 42       newline=document.all.test.insertRow();   
 43       newline.insertCell().innerHTML='<input       type="text"       name="tt[]"><input       type="button"       value="删除此行"       onclick="del()">'
 44       }   
 45       function    del(){   
 46       document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);   
 47       }   
 48       </script>
 49 
 50 
 51 注意：当使用window.event.srcElement.parentElement.parentElement.rowIndex获取行号时，调用调用使用此方法的函数不能放在标签：<span></span>、<label></label>内，否则不能获取行号
 52 
 53 例如：
 54 错误：<td><span><input   type="button"   value="删除此行" onclick="del()"></span></td>
 55 错误：<td><label><input   type="button"   value="删除此行" onclick="del()"></label></td>
 56 正确：<td><input   type="button"   value="删除此行" onclick="del()"></td>
 57 </body>   
 58       </html>   
 59 
 60 ==========================================
 61 
 62 兼容IE和FIREFOX的实例
 63 
 64 
 65 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 66 <html xmlns="http://www.w3.org/1999/xhtml">
 67 <head>
 68 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 69 <title>WURTH</title>
 70 </head>
 71 <body>
 72 
 73 <script type="text/javascript" language="javascript">
 74 function nextRow()
 75 {
 76 var productIndexObj = document.getElementById('productIndex');
 77 var productTbl = document.getElementById('productTbl');
 78 var productIndex = parseInt(productIndexObj.value) + 1;
 79 productIndexObj.value = productIndex;
 80 
 81 newRow = productTbl.insertRow(-1);
 82 
 83 indexCell = newRow.insertCell(0);
 84 indexCell.className = "TableTd";
 85 indexCell.innerHTML = productIndex;
 86 
 87 noCell = newRow.insertCell(1);
 88 noCell.className = "TableTd";
 89 noCell.innerHTML = "<input name='productNo[]' type='text' autocomplete='off' id='productNo_"+productIndex+"' onChange='autoproduct("+productIndex+")' />";
 90 
 91 nameCell = newRow.insertCell(2);
 92 nameCell.className = "TableTd";
 93 nameCell.innerHTML = "<input name='productName[]' type='text' id='productName_"+productIndex+"' />";
 94 
 95 numCell = newRow.insertCell(3);
 96 numCell.className = "TableTd";
 97 numCell.innerHTML = "<input name='productNum[]' type='text' id='productNum_"+productIndex+"' onkeyup='productcost("+productIndex+")' />";
 98 
 99 priceCell = newRow.insertCell(4);
100 priceCell.className = "TableTd";
101 priceCell.innerHTML = "<input name='productPrice[]' type='text' id='productPrice_"+productIndex+"' onkeyup='productcost("+productIndex+")' />";
102 
103 costCell = newRow.insertCell(5);
104 costCell.className = "TableTd";
105 costCell.innerHTML = "<input name='productCost[]' type='text' id='productCost_"+productIndex+"' />";
106 }
107 
108 
109 </script>
110 
111 
112 <table name="productTbl" id="productTbl" width="100%" style="padding-bottom:7px" border="0" cellpadding="1" cellspacing="0" align="center">
113     <tr>
114        <td width="30" name="productIndex" id="productIndex" type="hidden" value="1"></td>
115        <td    <td    <td    <td    <td </tr>
116    <tr>
117         <td >1</td>
118             <td ><input name='productNo[]' type='text' autocomplete='off' id='productNo_1' onChange='autoproduct(1)' /></td>
119             <td ><input name='productName[]' type='text' id='productName_1' /></td>
120             <td ><input name='productNum[]' type='text' id='productNum_1' onkeyup='productcost(1)' /></td>
121             <td ><input name='productPrice[]' type='text' id='productPrice_1' onkeyup='productcost(1)' /></td>
122             <td ><input name='productCost[]' type='text' id='productCost_1' /></td>
123         </tr>       
124 </table>
125 <table width="100%" border="0" cellpadding="1" cellspacing="0" align="center">
126 <tr>
127    <td style="text-align:right"><input type="button" onclick="nextRow()" value="新增貨號"/></td>
128 </tr>
129 </table>
130 
131 </body>
132 </html>