JS动态添加删除表格

<script type="text/javascript">
		//全局变量
		var i=0;
		//添加行
		function addMyRow(){
			var mytable = document.getElementById("mybody");
			var mytr = mytable.insertRow();
			mytr.setAttribute("id","tr"+i);
			var mytd_1=mytr.insertCell();
			var mytd_2=mytr.insertCell();
			var mytd_3=mytr.insertCell();
			var mytd_4=mytr.insertCell();
			var mytd_5=mytr.insertCell();
			mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";
			mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
			mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
			mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
			mytd_5.innerHTML="<input type='button' value='删除' onclick=\"delMyRow('"+i+"')\"/>";
			i++;
		}
		//删除当前行
		function delMyRow(j){
			var mytable = document.getElementById("mybody");
			var myrow = document.getElementById("tr"+j);
			mytable.deleteRow(myrow.rowIndex-1);
		}
		//删除所有行
		function delAllMyRow(){
			var mytable = document.getElementById("mybody");
			var rowlen=mytable.rows.length;
			for(var i=rowlen-1;i>=0;i--){
				mytable.deleteRow(i);
			}
		}
		</script>

<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">
		<table border="1">
			<thead>
				<tr bgcolor="red">
					<td align="center">
						姓名
					</td>
					<td align="center">
						性别
					</td>
					<td align="center">
						爱好
					</td>
					<td align="center">
						籍贯
					</td>
					<td align="center">
						操作
					</td>
				</tr>
			</thead>
			<tbody id="mybody">
			
			</tbody>
		</table>

评论

2 楼 liujunsong 2009-03-26  

用这么多的interHTML,将来程序的调试是个很大的问题.
我吃过这个亏,劝你别这么干

1 楼 jeasony 2009-03-24  

我已收藏您的博文。谢谢。对我有帮助