HTML创建“”动态“”表格增删练习

最新推荐文章于 2024-02-04 11:24:04 发布

原创

最新推荐文章于 2024-02-04 11:24:04 发布 · 834 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html

这篇博客介绍了如何使用HTML创建动态表格，包括成员的增删功能。首先分析了创建动态表格的思路，接着详细讲解了如何实现成员增加，如添加按钮绑定事件、获取文本框内容、创建TD和TR，并将其添加到表格中。然后阐述了删除功能的实现，主要通过确定删除的超链接并执行删除操作。最后给出了整体的代码实现。

HTML创建“”动态“”表格增删练习

思路分析：

创建基本表格，写入初始显示内容
一. 成员增加

添加按钮绑定单击事件
获取文本框内容
创建td，设置td的文本为文本框的内容
创建tr
将td添加到tr中
获取table，将tr添加到table中
二. 成员删除
确定点击的是哪一个超链接
如何删除
添加的主要思路是将子节点放入父级节点中即将放入，再将放入中，
删除的主要思路是通过父级节点找到对应的子节点进行删除。

基本表单初始显示设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表单</title>
<style>
 table {
     
     
 	border: 1px soild;  
 	margin:auto;
 	width: 500px;
 }
 	td,th{
     
       
 	text-align :center;
 	margin:50px;
 	}
 	div{
     
     
 	 text-align:center;
 	 margin:50px;
 	}
</style>
</head>
<body>
	<div>
	<input type="text" id="id"  placeholder="请输入编号">
	<input type="text" id="name"  placeholder="请输入姓名">
	<input type="text" id="gender"  placeholder="请输入性别">
	<input type="button" value="添加"  id="btn_add">
	</div>
	
	<table border>
		<caption>员工表</caption>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</tr

最低0.47元/天解锁文章