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

最新推荐文章于 2021-12-21 16:07:06 发布

Arvicky

最新推荐文章于 2021-12-21 16:07:06 发布

阅读量752

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/arvicky/article/details/119358903

版权

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元/天解锁文章

Arvicky

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML创建“”动态“”表格增删练习

HTML创建“”动态“”表格增删练习思路分析：创建基本表格，写入初始显示内容一. 成员增加添加按钮绑定单击事件获取文本框内容创建td，设置td的文本为文本框的内容创建tr将td添加到tr中获取table，将tr添加到table中二. 成员删除确定点击的是哪一个超链接如何删除添加的主要思路是将子节点放入父级节点中即将放入，再将放入中，删除的主要思路是通过父级节点找到对应的子节点进行删除。基本表单初始显示设置<!DOCTYPE html><html&gt
复制链接

扫一扫

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

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

思路分析：

“相关推荐”对你有帮助么？