javascript动态添加表格

javascript动态增加和删除表格行的例子：

Javascript代码

1. <script language="javascript" type="text/javascript">   
2.     var id = 5;   
3.     function addtr(){ //增加表格   
4.         var tem = ++id;   
5.         var t = document.getElementById("tab");   
6.         var row = t.insertRow(t.rows.length-1);   
7.         row.bgColor="#CCCCCC";   
8.         row.id="row"+tem;   
9.         var cell1 = row.insertCell(0);   
10.         cell1.bgColor="#DFF1F8";   
11.         var cell2 = row.insertCell(1);   
12.         cell2.bgColor="#f0f0f0";   
13.         var cell3 = row.insertCell(2);   
14.         cell3.bgColor="#DFF1F8";   
15.         var cell4 = row.insertCell(3);   
16.         cell4.bgColor="#f0f0f0";   
17.         cell1.innerHTML="产品编号：";   
18.         cell2.innerHTML="<input type='text' name='code"+tem+"' id='code"+tem+"' οnchange='prodcheck(this.id)'/>";   
19.         cell3.innerHTML="数 量：";   
20.         cell4.innerHTML="<input type='text' name='num"+tem+"' id='num"+tem+"' οnchange='isNumber(this.id)' />&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:deltr()'>删除</a>";   
21.         document.f.hid.value=id;   
22.     }   
23.        
24.     function deltr(){  //删除表格   
25.         var tdel = document.getElementById("tab");   
26.         tdel.deleteRow(id+2);   
27.         id--;   
28.         document.f.hid.value=id;   
29.     }   
30. </script>  

<script language="javascript" type="text/javascript">
	var id = 5;
	function addtr(){ //增加表格
		var tem = ++id;
		var t = document.getElementById("tab");
		var row = t.insertRow(t.rows.length-1);
		row.bgColor="#CCCCCC";
		row.id="row"+tem;
		var cell1 = row.insertCell(0);
		cell1.bgColor="#DFF1F8";
		var cell2 = row.insertCell(1);
		cell2.bgColor="#f0f0f0";
		var cell3 = row.insertCell(2);
		cell3.bgColor="#DFF1F8";
		var cell4 = row.insertCell(3);
		cell4.bgColor="#f0f0f0";
		cell1.innerHTML="产品编号：";
		cell2.innerHTML="<input type='text' name='code"+tem+"' id='code"+tem+"' οnchange='prodcheck(this.id)'/>";
		cell3.innerHTML="数 量：";
		cell4.innerHTML="<input type='text' name='num"+tem+"' id='num"+tem+"' οnchange='isNumber(this.id)' />&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:deltr()'>删除</a>";
		document.f.hid.value=id;
	}
	
	function deltr(){  //删除表格
		var tdel = document.getElementById("tab");
		tdel.deleteRow(id+2);
		id--;
		document.f.hid.value=id;
	}
</script>

Html代码

1. <table width="50%" align="center" name="tab" id="tab">  
2.   <tr>  
3.     <td bgcolor="#f0f0f0" colspan="4"><% response.exits %></td>  
4.   </tr>  
5.       
6.   <tr id="row0">  
7.     <td bgcolor="#DFF1F8">订 单 号：</td>  
8.     <td bgcolor="#f0f0f0"><input type="text" name="orderno" /></td>  
9.     <td bgcolor="#DFF1F8">客户名称：</td>  
10.     <td bgcolor="#f0f0f0"><input type="text" name="clientname" /></td>  
11.   </tr>  
12.   <tr id="row00">  
13.     <td bgcolor="#DFF1F8">订单日期：</td>  
14.     <td bgcolor="#f0f0f0"><input type="text" id="date" name="date" onclick="new CbsCalendar(this.id)" /></td>  
15.     <td bgcolor="#DFF1F8">操作员：</td>  
16.     <td bgcolor="#f0f0f0"><input type="text" name="operator" /></td>  
17.   </tr>    
18.   <tr id="row1">  
19.     <td bgcolor="#DFF1F8">产品编号：</td>  
20.     <td bgcolor="#f0f0f0"><input type="text" name="code1" id="code1" onchange='prodcheck(this.id)'/></td>  
21.     <td bgcolor="#DFF1F8">数 量：</td>  
22.     <td bgcolor="#f0f0f0"><input type="text" name="num1" id="num1" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:addtr()">增加</a></td>  
23.   </tr>  
24.   <tr id="row2">  
25.     <td bgcolor="#DFF1F8">产品编号：</td>  
26.     <td bgcolor="#f0f0f0"><input type="text" name="code2" id="code2" onchange='prodcheck(this.id)' /></td>  
27.     <td bgcolor="#DFF1F8">数 量：</td>  
28.     <td bgcolor="#f0f0f0"><input type="text" name="num2" id="num2" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>  
29.   </tr>  
30.   <tr id="row3">  
31.     <td bgcolor="#DFF1F8">产品编号：</td>  
32.     <td bgcolor="#f0f0f0"><input type="text" name="code3" id="code3" onchange='prodcheck(this.id)' /></td>  
33.     <td bgcolor="#DFF1F8">数 量：</td>  
34.     <td bgcolor="#f0f0f0"><input type="text" name="num3" id="num3" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>  
35.   </tr>  
36.   <tr id="row4">  
37.     <td bgcolor="#DFF1F8">产品编号：</td>  
38.     <td bgcolor="#f0f0f0"><input type="text" name="code4" id="code4" onchange='prodcheck(this.id)'/></td>  
39.     <td bgcolor="#DFF1F8">数 量：</td>  
40.     <td bgcolor="#f0f0f0"><input type="text" name="num4" id="num4" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>  
41.   </tr>  
42.   <tr id="row5">  
43.     <td bgcolor="#DFF1F8">产品编号：</td>  
44.     <td bgcolor="#f0f0f0"><input type="text" name="code5" id="code5" onchange='prodcheck(this.id)'/></td>  
45.     <td bgcolor="#DFF1F8">数 量：</td>  
46.     <td bgcolor="#f0f0f0"><input type="text" name="num5" id="num5" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>  
47.   </tr>  
48.   <tr>  
49.     <td colspan="4" align="center"><input type="submit" name="submit" id="submit" src="/static/images/affirm.gif" value="确定" /></td>  
50.   </tr>  
51. </table>