javascript动态添加表格

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

<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+"' onchange='prodcheck(this.id)'/>";
		cell3.innerHTML="数 量：";
		cell4.innerHTML="<input type='text' name='num"+tem+"' id='num"+tem+"' onchange='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>

<table width="50%" align="center" name="tab" id="tab">
  <tr>
  	<td bgcolor="#f0f0f0" colspan="4"><% response.exits %></td>
  </tr>
   
  <tr id="row0">
    <td bgcolor="#DFF1F8">订 单 号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="orderno" /></td>
    <td bgcolor="#DFF1F8">客户名称：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="clientname" /></td>
  </tr>
  <tr id="row00">
    <td bgcolor="#DFF1F8">订单日期：</td>
    <td bgcolor="#f0f0f0"><input type="text" id="date" name="date" onclick="new CbsCalendar(this.id)" /></td>
    <td bgcolor="#DFF1F8">操作员：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="operator" /></td>
  </tr> 
  <tr id="row1">
    <td bgcolor="#DFF1F8">产品编号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="code1" id="code1" onchange='prodcheck(this.id)'/></td>
    <td bgcolor="#DFF1F8">数 量：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="num1" id="num1" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:addtr()">增加</a></td>
  </tr>
  <tr id="row2">
    <td bgcolor="#DFF1F8">产品编号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="code2" id="code2" onchange='prodcheck(this.id)' /></td>
    <td bgcolor="#DFF1F8">数 量：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="num2" id="num2" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>
  </tr>
  <tr id="row3">
    <td bgcolor="#DFF1F8">产品编号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="code3" id="code3" onchange='prodcheck(this.id)' /></td>
    <td bgcolor="#DFF1F8">数 量：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="num3" id="num3" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>
  </tr>
  <tr id="row4">
    <td bgcolor="#DFF1F8">产品编号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="code4" id="code4" onchange='prodcheck(this.id)'/></td>
    <td bgcolor="#DFF1F8">数 量：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="num4" id="num4" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>
  </tr>
  <tr id="row5">
    <td bgcolor="#DFF1F8">产品编号：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="code5" id="code5" onchange='prodcheck(this.id)'/></td>
    <td bgcolor="#DFF1F8">数 量：</td>
    <td bgcolor="#f0f0f0"><input type="text" name="num5" id="num5" onchange="isNumber(this.id)"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:deltr()">删除</a></td>
  </tr>
  <tr>
    <td colspan="4" align="center"><input type="submit" name="submit" id="submit" src="/static/images/affirm.gif" value="确定" /></td>
  </tr>
</table>