您的位置：首页 > Web前端 > JavaScript

JS操作页面表格内容的添加与删除

2013-01-04 11:50 459 查看

<html>
	<head>
		<title>HTML DOM</title>
		<script type="text/javascript">
			//定义一个删除一行信息函数
			function doDel(bt){
				document.getElementById("tid").deleteRow(bt.parentNode.parentNode.rowIndex);
			}
			
			function doAdd(myform){
				//获取要添加的信息
				var id=myform.id.value;
				var name=myform.name.value;
				var age=myform.age.value;
				var sex=myform.sex.value;
				
				//获取表格节点对象
				var tid = document.getElementById("tid");
				
				//添加一行,返回新的行节点对象
				var row = tid.insertRow(tid.rows.length);
				
				//在行对象中添加一个个td节点
				row.insertCell(0).innerHTML=id;
				row.insertCell(1).innerHTML=name;
				row.insertCell(2).innerHTML=age;
				row.insertCell(3).innerHTML=sex;
				row.insertCell(4).innerHTML="<button onclick=\"doDel(this)\">删除</button>";
	
				return false;
			}
		</script>	
	</head>
	<body>
		<!-- html注释 -->
		<h2 style="color:red">使用HTML的DOM操作来操作HTML标签</h2>
		<table id="tid" width="400" border="1">
		<thead>
			<tr>
				<th>Id号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="mytable">
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>20</td>
				<td>男</td>
				<td><button onclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1002</td>
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td><button onclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1003</td>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
				<td><button onclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1004</td>
				<td>赵六</td>
				<td>20</td>
				<td>男</td>
				<td><button onclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1005</td>
				<td>田七</td>
				<td>20</td>
				<td>男</td>
				<td><button onclick="doDel(this)">删除</button></td>
				</tr>
		</tbody>
		</table>
		
		<br/><br/>
		<form action="a.php" onsubmit="return doAdd(this);">
			学号:<input type="text" name="id" /> <br/><br/>
			姓名:<input type="text" name="name" /> <br/><br/>
			年龄:<input type="text" name="age" /> <br/><br/>
			性别:<input type="text" name="sex" /> <br/><br/>
			<input type="submit" value="添加"/>
		</form>
		
		<a href="2.html">2.html</a>
		<a href="javascript:window.history.forward()">前进</a>
		<a href="javascript:window.history.go(1)">前进</a>
	</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航