JavaScript动态添加表格传值,全选，一键删除，功能齐全

最新推荐文章于 2021-02-26 11:35:54 发布

小逸猿

最新推荐文章于 2021-02-26 11:35:54 发布

阅读量457

点赞数

文章标签： JavaScript 动态表格

本文链接：https://blog.csdn.net/weixin_45748576/article/details/102576252

版权

本文展示了如何使用JavaScript动态创建表格，并实现全选与一键删除功能。通过示例代码，读者可以了解到如何在网页中交互式地管理表格数据。

摘要由CSDN通过智能技术生成

老规矩，先上效果图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
	</head>
	<script type="text/javascript">
		function addItem() {
   


			//1,先找到内容
			var id = document.getElementById("id").value;
			var userName = document.getElementById("userName").value;
			var age = document.getElementById("age").value;
			var address = document.getElementById("address").value;
			var pwd = document.getElementById("pwd").value;

			//创建表格然后赋值赋值
			//2.在上面的列表中添加一行，把内容放在该行中
			var tr = document.createElement("tr");

			var td1 = document.createElement("td");
			var input1 = document.createElement("input");
			input1.setAttribute("type", "checkbox");
			input1.setAttribute("name", "item");
			td1.appendChild(input1);

			var td2 = document.createElement("td");
			td2.innerHTML = id;

			var td3 = document.createElement("td")<