动态增加单元表格

cityhunt

浏览: 271123 次
性别:
来自: 成都

最近访客更多访客>>

小雷看天下

yangjunvc

boomion

yedongyang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>动态增加单元表格</TITLE>
 </HEAD>
 <script>
	function delrow(index)
	{
	var tab = document.getElementById("myTab");
	var rowLength = tab.rows.length;
	if(index > 0)
		tab.deleteRow(index);
	else
		alert("没有可再删选项");
	}

	function addrow()
	{
	//创建表格对象

	var tableObj = document.getElementById("myTab"); //取得id=myTab的dom元素
		

	var newRowObj = tableObj.insertRow(tableObj.rows.length); //获得表格的行数
		
	var newColName = newRowObj.insertCell(newRowObj.cells.length);//创建第1列

           var newColGender = newRowObj.insertCell(newRowObj.cells.length);//创建第2列

	var newColAge = newRowObj.insertCell(newRowObj.cells.length);//创建第3列

	var newColDep = newRowObj.insertCell(newRowObj.cells.length);//创建第4列

	var newColButton = newRowObj.insertCell(newRowObj.cells.length);//创建第5列

	//对单元格赋值
	newColName.innerHTML = "<input type='text' name='name' id='name'>";
	newColGender.innerHTML = "<input type='text' name='gender' id='gender'>";
	newColAge.innerHTML = "<input type='text' name='age' id='age'>";
	newColDep.innerHTML = "<input type='text' name='dep' id='dep'>";
	newColButton.innerHTML ='<input type="button" value="删除" onclick="delrow('+(tableObj.rows.length-1)+')">';
	//此处有问题，待完善中}
	</script>
 <BODY>
	<div id="test">
		<table id="myTab" border="1" cellspacing="0" cellpadding="0">
			<tr><td width="30">姓名</td><td width="30">性别</td><td width="30">年龄</td><td width="30">部门</td><td width="30">操作</td></tr>
			<tr>
				<td><input type="text" name="name" id="name" value="sailor"/> </td>
				<td><input type="text" name="gender" id="gender" value="1 "/> </td>
				<td><input type="text" name="age" id="age" value=" 2"/> </td>
				<td><input type="text" name="dep" id="dep" value="IT"/> </td>
				<td><input type="button" value="删除" onclick="delrow(1)"></td>
			</tr>
		</table>
	    <input id="add" type="button" value="增加一行" onclick="addrow()">
	</div>
 </BODY>
</HTML>

分享到：