JS-动态表格(添加-删除)

原创

Issue!!! 2021-08-26 15:58:11 博主文章分类：JS学习笔记 ©著作权

文章标签 html javascript 超链接输入框 window对象 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者Issue!!!的原创作品，请联系作者获取转载授权，否则将追究法律责任

任务概述

实现动态添加,删除的表单功能

对应的 h t m l html html代码如下

<!DOCTYPE html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Window对象</title>
	<style>
		div{
			text-align:center;
			margin-top:50px;
		}
		table{
			margin:auto;
			width:500px;
			border:1px solid;
		}
		td,th{
			text-align:center;
			border:1px solid;
		}
		#tit{
			text-align:center;
		}
	</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>
		<p id="tit">学生信息表</p>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>任我行</td>
			<td>男</td>
			<td><a href="javascript:void(0);" onclick="de(this);">删除</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>issue!</td>
			<td>男</td>
			<td><a href="javascript:void(0);" onclick="de(this);">删除</a></td>
		</tr>
	</table>
</body>
</html>

Ⅰ . 实现添加功能 \color{Red}Ⅰ.实现添加功能 Ⅰ.实现添加功能

HTML元素通常是由元素节点和文本节点组成。

创建一个标题 (H1), 你必须创建 “H1” 元素和文本节点:

比如

var h=document.createElement("H1")
var t=document.createTextNode("Hello World");
h.appendChild(t);

所以我们的任务就清楚了

Ⅰ . 获取用户输入框的内容 Ⅰ.获取用户输入框的内容 Ⅰ.获取用户输入框的内容

var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;

Ⅱ . 创建一个 t d 元素 , 由 t d 节点和文本节点组成 Ⅱ.创建一个td元素,由td节点和文本节点组成 Ⅱ.创建一个td元素,由td节点和文本节点组成

var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);

Ⅲ . 再创建 t r 元素 , 把 t d 假如到 t r , 再把 t r 加入到 t a b l e Ⅲ.再创建tr元素,把td假如到tr,再把tr加入到table Ⅲ.再创建tr元素,把td假如到tr,再把tr加入到table

说的这么绕,就是逐级加上去罢了

var tr = document.createElement("tr");
tr.appendChild(td_id);
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);

如此一来,添加的代码就显得十分简单

Ⅱ . 点击删除超链接 , 就删除对应的表格行 \color{Red}Ⅱ.点击删除超链接,就删除对应的表格行 Ⅱ.点击删除超链接,就删除对应的表格行

这个也简单,给超链接设置 o n c l i c k onclick onclick方法即可

但是函数怎么写能删除?

我们知道 r e m o v e C h i l d removeChild removeChild方法就是父亲移除儿子

所以只需要获取 t a b l e table table和对应的行 t r tr tr即可

function de(x)
{
	var table = x.parentNode.parentNode.parentNode;
	var tr = x.parentNode.parentNode;
	table.removeChild(tr);
}

完整代码

<!DOCTYPE html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Window对象</title>
	<style>
		div{
			text-align:center;
			margin-top:50px;
		}
		table{
			margin:auto;
			width:500px;
			border:1px solid;
		}
		td,th{
			text-align:center;
			border:1px solid;
		}
		#tit{
			text-align:center;
		}
	</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>
		<p id="tit">学生信息表</p>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>任我行</td>
			<td>男</td>
			<td><a href="javascript:void(0);" onclick="de(this);">删除</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>issue!</td>
			<td>男</td>
			<td><a href="javascript:void(0);" onclick="de(this);">删除</a></td>
		</tr>
	</table>
	<script>
		//# sourceURL=dynamicScript.js
			document.getElementById("btn_add").onclick = function()
			{
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var gender = document.getElementById("gender").value;

				var td_id = document.createElement("td");
				var text_id = document.createTextNode(id);
				td_id.appendChild(text_id);

				var td_name = document.createElement("td");
				var text_name = document.createTextNode(name);
				td_name.appendChild(text_name);

				var td_gender = document.createElement("td");
				var text_gender = document.createTextNode(gender);
				td_gender.appendChild(text_gender);

				var td_a = document.createElement("td");
				var ele_a = document.createElement("a");
				ele_a.setAttribute("href","javascript:void(0);");
				ele_a.setAttribute("onclick","de(this);");
				var text_a = document.createTextNode("删除");
				ele_a.appendChild(text_a);
				td_a.appendChild(ele_a);


				var tr = document.createElement("tr");
				tr.appendChild(td_id);
				tr.appendChild(td_name);
				tr.appendChild(td_gender);
				tr.appendChild(td_a);
				var table = document.getElementsByTagName("table")[0];
				table.appendChild(tr);
			}
			function de(x)
			{
				var table = x.parentNode.parentNode.parentNode;
				var tr = x.parentNode.parentNode;
				table.removeChild(tr);
			}
	</script>
</body>
</html>

! ! ! 但是这样不是太麻烦了吗 ! ! 又长又臭 !!!但是这样不是太麻烦了吗!!又长又臭 !!!但是这样不是太麻烦了吗!!又长又臭

实际上我们可以直接用 i n n e r H T M L innerHTML innerHTML方法给 t a b l e table table嵌入代码段

效果相同,哈,真好啊

	<script>
		//# sourceURL=dynamicScript.js
			document.getElementById("btn_add").onclick = function()
			{
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var gender = document.getElementById("gender").value;
				var table = document.getElementsByTagName("table")[0];
				table.innerHTML +="<tr>\n"+
				"			<td>"+id+"</td>\n"+
				"			<td>"+name+"</td>\n"+
				"			<td>"+gender+"</td>\n"+
				"			<td><a href=\"javascript:void(0);\" οnclick=\"de(this);\">删除</a></td>\n"+
				"		</tr>";
			}
			function de(x)
			{
				var table = x.parentNode.parentNode.parentNode;
				var tr = x.parentNode.parentNode;
				table.removeChild(tr);
			}
	</script>