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%"> </td>
24 <td width="62%"> </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>