HTML Javascript动态表格

最新推荐文章于 2024-03-18 19:05:06 发布

zhangdy_plus

最新推荐文章于 2024-03-18 19:05:06 发布

阅读量284

点赞数

分类专栏： web前端文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43623492/article/details/105317082

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用到的函数

createElement() 通过指定名称创建一个元素
语法：

document.createElement("元素名");

createTextNode() 创建文本节点

语法:

document.createTextNode(文本);

appendChild() 向节点的子节点列表的末尾添加新的子节点(通俗的意思就是给自己造个孩子)

语法:

爹元素名.appendChild(儿子元素名);

setAttribute() 创建或改变某个新属性,如果指定属性已经存在,则只设置该值。

语法:

要添加属性或要修改属性的元素.setAttribute("属性名","属性值");

removeChild() 方法可从子节点列表中删除某个节点，如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL

语法:

爹元素名.removeChild(儿子元素名);

源代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.box{
			position: absolute;
			top: 100px;
			left: 236px;

		}
		.table tr td{
			width: 200px;
			height: 32px;
			border: 1px solid black;
			text-align: center;
		}
		.input{
			width: 200px;
			height: 32px;
		}
		#add{
			width: 200px;
			height: 41px;
		}
		a{
			text-decoration: none;
			color: black;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<input type="text" class="input" id="id">
			<input type="text" class="input" id="name">
			<input type="text" class="input" id="class">
			<input type="button" name="add" id="add" value="点击添加信息">
			<br><br>
			<table class="table" id="table">
				<caption>学生信息表</caption>
				<tr>
					<td>学号</td>
					<td>姓名</td>
					<td>班级</td>
					<td>操作</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		document.getElementById("add").onclick=function(){
			var input_id=document.getElementById("id").value;
			var input_name=document.getElementById("name").value;
			var input_class=document.getElementById("class").value;

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

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

			var td_class=document.createElement("td");
			var text_class=document.createTextNode(input_class);
			td_class.appendChild(text_class);

			var del=document.createElement("a");
			del.setAttribute("href","javascript:void(0);");
			del.setAttribute("onclick","del_tr(this);");
			var text_del=document.createTextNode("delete");
			del.appendChild(text_del);
			var td_del=document.createElement("td");
			td_del.appendChild(del);

			var tr=document.createElement("tr");
			tr.appendChild(td_id);
			tr.appendChild(td_name);
			tr.appendChild(td_class);
			tr.appendChild(td_del);
			var table=document.getElementById("table");
			table.appendChild(tr);
		}
		function del_tr(obj){
			var del_table=obj.parentNode.parentNode.parentNode;
			var del_tr=obj.parentNode.parentNode;
			del_table.removeChild(del_tr);
		}
	</script>
</body>
</html>

效果图

在这里插入图片描述

zhangdy_plus

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML Javascript动态表格

用到的函数createElement() 通过指定名称创建一个元素语法：document.createElement("元素名");createTextNode() 创建文本节点语法:document.createTextNode(文本);appendChild() 向节点的子节点列表的末尾添加新的子节点(通俗的意思就是给自己造个孩子)语法:爹元素名.appendChild...
复制链接

扫一扫