HTMLdocument简单使用

最新推荐文章于 2021-06-17 09:44:07 发布

Silence丶你的名字

最新推荐文章于 2021-06-17 09:44:07 发布

阅读量727

点赞数

分类专栏： Html 文章标签： dom html

本文链接：https://blog.csdn.net/qq_42553504/article/details/116353990

版权

Html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				border: 1px solid;
				margin: auto;
				width: 31.25rem;

			}

			td,
			th {
				text-align: center;
				border: 1px solid;
			}

			div {
				text-align: center;
				margin-bottom: 50px;
			}
		</style>
	</head>
	<body>
		<div style="text-align: center;">
			<input type="text" name="username" id="username" placeholder="请输入姓名" />
			<input type="text" name="age" id="age" placeholder="请输入年龄" />
			<input type="text" name="sex" id="sex" placeholder="请输入性别" />
			<button id="addbtn">添加</button>
		</div>



		<table id="tab">
			<caption>学生信息表</caption>
			<thead>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>23</td>
					<td>男</td>
					<td><a href="Javascript:void(0);" onclick="drop(this);">删除</a> </td>
				</tr>
				<tr>
					<td>李四</td>
					<td>21</td>
					<td>女</td>
					<td><a href="Javascript:void(0);" onclick="drop(this);">删除</a> </td>
				</tr>
			</tbody>
		</table>




	</body>
	<script>
		//添加
		let addbtn = document.getElementById("addbtn");
		addbtn.onclick = function() {
			let tr = document.createElement("tr");
			let nameTd = document.createElement("td");
			let ageTd = document.createElement("td");
			let sexTd = document.createElement("td");
			let deleteTd = document.createElement("td");
			tr.appendChild(nameTd);
			tr.appendChild(ageTd);
			tr.appendChild(sexTd);
			tr.appendChild(deleteTd);

			let username = document.getElementById("username").value;
			let age = document.getElementById("age").value;
			let sex = document.getElementById("sex").value;

			let nameTxt = document.createTextNode(username);
			let ageTxt = document.createTextNode(age);
			let sexTxt = document.createTextNode(sex);

			nameTd.appendChild(nameTxt);
			ageTd.appendChild(ageTxt);
			sexTd.appendChild(sexTxt);

			let a = document.createElement("a");
			let atext = document.createTextNode("删除");
			a.setAttribute("href", "javascript:void(0);");
			a.setAttribute("onclick", "drop(this);");
			a.appendChild(atext);
			deleteTd.appendChild(a);

			let table = document.getElementById("tab");
			table.appendChild(tr);
		}
		//删除
		function drop(obj) {
			let table = obj.parentElement.parentElement.parentElement;
			let tr = obj.parentElement.parentElement;
			table.removeChild(tr);
		}
	</script>
</html>

Silence丶你的名字

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTMLdocument简单使用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> table { border: 1px solid; margin: auto; width: 31.25rem; } td, th { text-align: center; border.
复制链接

扫一扫