使用js对表格进行添加数据、刪除数据 批量删除数据

一 选中多个数据进行删除&&添加数据
html页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>单选多选</title>
		<!--做一些修饰,自行定义-->
		<style> tr {  text-align: center; } tr td:first-child {  width: 50px; } </style>
	</head>

	<body>
		<!--<form>-->
		<!--先创建初始的数据-->
		<table border="1" width="400px" align="center" id="tab_a">
			<tr>
				<td colspan="4">
					<!--添加按钮-->
					<button onclick="addData()">添加</button>
					<!--批量删除按钮-->
					<button onclick="deleteData()">批量删除</button>
				</td>
			</tr>
			<tr>
				<th>
					<!--全选按钮-->
					<input type="checkbox" name="checkAll" id="checkAll" onchange="checkedAll()" />
				</th>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>六一</td>
				<td>24</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>张二</td>
				<td>24</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>李三</td>
				<td>21</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>王四</td>
				<td>31</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>小六</td>
				<td>27</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>二七</td>
				<td>22</td>
			</tr>
		</table>
		<!--</form>-->
	</body>
</thml>

js代码

	<script>
		//获取全选按钮
		var checkAll = document.getElementById("checkAll");
		//获取所有的单选项
		var checkArray = document.getElementsByName("check");
		//获取表格
		var tab_a = document.getElementById("tab_a").children[0];
		//tab_a.rows(获取有多少行)
		var trArray = tab_a.rows;

		function ids() { 
			//定义编号
			let id = 0;
			//除去标题,给每一行添加上id编号
			for(let i = 2; i < trArray.length; i++) { 
				trArray[i].cells[1].innerText = ++id;
			}
		}

		//渲染每一行的id编号
		ids();
		//全选按钮
		function checkedAll() { 
			//全选
			if(checkAll.checked) { 
				for(let i = 0; i < checkArray.length; i++) { 
					checkArray[i].checked = true;
				}
			}
			//全不选
			if(!checkAll.checked) { 
				for(let i = 0; i < checkArray.length; i++) { 
					checkArray[i].checked = false;
				}
			}
		}
		//添加数据
		function addData() { 
			//获取表格最后一行里面的数据 .cells(获取所有的列)
			let tdArray = trArray[trArray.length - 1].cells;
			//获取最后一行里面的编号,那么下一行的编号就可以在他的基础上加1 
			let idNew = tdArray[1].outerText;
			//当所有的数据被清空,tdArray[1].outerText就不在是数字,手动修改
			if(isNaN(idNew)) { 
				idNew = 0;
			}
			//获取输入的信息
			let name = prompt("请输入姓名");
			let age = prompt("请输入年龄");
			//创建tr标签
			let trTab = document.createElement("tr");

			for(let i = 0; i < tdArray.length; i++) { 
				//创建td标签
				let tdTab = document.createElement("td");
				//向行内添加单元格
				trTab.appendChild(tdTab);
			}
			//获取所有的td tdA为td的集合
			let tdA = trTab.cells;

			//创建选择框 给上type 和 name属性
			let inp = document.createElement("input");
			inp.setAttribute("type", "checkbox");
			inp.setAttribute("name", "check");

			tdA[0].appendChild(inp);
			tdA[1].innerHTML = ++idNew; //编号加1
			tdA[2].innerHTML = name;
			tdA[3].innerHTML = age;
			//向表格内添加行
			tab_a.appendChild(trTab);
		}

// //删除数据
// function deleteData(){ 
// //获取有多少行
// let trArray1 = tab_a.rows;
// //终止条件
// if(trArray1.length == 2){ 
// return ;
// }
// for (let i=2; i<trArray1.length; i++) { 
 console.log(trArray[i].cells[0].children[0].checked);
// //trArray[i].cells[0] 获取当前行的第一个td
// //.children[0]获取td里面的第一个子标签,input
// //.checked 获取是否被选中,选中返回true,未选中返回fasle
// if(trArray1[i].cells[0].children[0].checked){ 
// //当复选框被选中时删除tr
// tab_a.removeChild(trArray1[i]);
// //删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
// //使用i-- 在退回到这一行做一次判断
// i--;
// }
// }
// //删除完之后,多选框取消选定状态
// if(checkAll.checked){ 
// checkAll.checked = false;
// }
// ids();
// }

		//删除数据
		function deleteData() { 
			//循环所有的选项
			for(let i = 0; i < checkArray.length; i++) { 
				//判断是否被选中
				if(checkArray[i].checked) { 
					//当复选框被选中时进行删除

					//获取最高的节点
					let tbody = checkArray[i].parentNode.parentNode.parentNode;
					//获取被选中的这一行
					let tr = checkArray[i].parentNode.parentNode
					//进行删除
					tbody.removeChild(tr);
					//删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
					//使用i-- 在退回到这一行做一次判断
					i--;
				}
			}
			//删除完之后,多选框取消选定状态
			if(checkAll.checked) { 
				checkAll.checked = false;
			}
			ids();
		}
	</script>

效果图
《使用js对表格进行添加数据、刪除数据 批量删除数据》
二 添加数据,单个删除数据
html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加信息</title>
		<!--做一些修饰,自行定义-->
		<style> *{  margin: 10px auto; padding: 0px auto; } div{  width: 800px; text-align: center; border: 1px solid red; } </style>
	</head>
	<body>
		<div>
			<!--添加信息-->
			学号: <input type="text" name="id" id="id"/>
			姓名: <input type="text" name="name" id="name"/>
			年龄: <input type="text" name="age" id="age" />
			<br />
			<!--添加按钮-->
			<button onclick="addData()">添加信息</button>
			<p></p>
			<!--初始数据-->
			<table border="1" id="tab_a">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
				<tr>
					<td>10000</td>
					<td>张三</td>
					<td>23</td>
					<!--删除按钮,只删除这一行-->
					<td><button onclick="deleteData(this)">删除</button></td>
				</tr>
			</table>
		</div>
	</body>
</html>

js代码

	<script>
		
		function addData(){ 
			//获取学号
			let id = document.getElementById("id").value;
			//获取姓名
			let name = document.getElementById("name").value;
			//获取年龄
			let age = document.getElementById("age").value;
			
			//判断信息不为空值
			if(id==""||name==""||age==""){ 
				alert("请不要填写空信息");
				return ;
			}
			
			//获取表格
			let tab_a = document.getElementById("tab_a");
			//获取表格内部表
			let tbody = tab_a.children[0];
			//根据标题可获取有多少列
			let cellsLen = tbody.rows[0].cells.length;
			//创建tr标签
			let tr = document.createElement("tr");
			
			//依次创建td标签
			for(let i=0; i<cellsLen; i++){ 
				//创建td标签
				let td = document.createElement("td");
				//将td标签添加到tr里
				tr.appendChild(td);
			}
			//创建一个按钮
			let but = document.createElement("button");
			//创建文本内容
			let textA = document.createTextNode("删除");
			//将文本内容添加到按钮
			but.appendChild(textA);
			//给按钮添加属性
			but.setAttribute("onclick","deleteData(this)");
			//给每个td赋值
			tr.cells[0].innerHTML = id;
			tr.cells[1].innerHTML = name;
			tr.cells[2].innerHTML = age;
			//添加删除按钮
			tr.cells[3].appendChild(but);
			//添加到table里
			tbody.appendChild(tr);
		}
		
		function deleteData(obj){ 
			//parentNode返回父级节点
			//obj.parentNode.parentNode.parentNode.removeChild 返回到table节点并进行删除
			//obj.parentNode.parentNode 返回到tr节点
			obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
		}

效果图
《使用js对表格进行添加数据、刪除数据 批量删除数据》

    原文作者:java.小小白
    原文地址: https://blog.csdn.net/weixin_47427198/article/details/112918393
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞