原生JS 对表格增加删除，多选删除，全选，取消全选

最新推荐文章于 2024-05-16 16:52:30 发布

CV_J

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量384

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_49420571/article/details/133875756

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial=scale=1">
		<title>表格增删改查示例</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<table id="mytable" border="1">
			<thead>
				<tr>
					<td><input type="checkbox" name="item" class="checkbox" onclick="checkAll()" /></td>
					<th>编号</th>
					<th>姓名</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="listTable">
				<tr>
					<td><input type="checkbox" name="item" class="checkbox" onclick="updateSelectAll()" /></td>
					<td>234234234</td>
					<td>nfjekg</td>
					<td>grgwwag</td>
					<td>
						<input type="button" name="" value="删除" onclick="del(this)" />
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="item" class="checkbox" onclick="updateSelectAll()" /></td>
					<td>821u943</td>
					<td>ejsbesngj</td>
					<td>123456</td>
					<td>
						<input type="button" name="" value="删除" onclick="del(this)" />
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="item" class="checkbox" onclick="updateSelectAll()" /></td>
					<td>1234568</td>
					<td>afawfwaf</td>
					<td>awfawf</td>
					<td>
						<input type="button" name="" value="删除" onclick="del(this)" />
					</td>
				</tr>
				<input type="button" name="" value="多选删除" onclick="delAll(this)" />
			</tbody>
		</table>
		<h1>新增数据</h1>
		<table>
			<tr>
				<th>编号</th>
				<td><input type="text" name="" id="num" /></td>
			</tr>
			<tr>
				<th>姓名</th>
				<td><input type="text" id="username" /></td>
			</tr>
			<tr>
				<th>密码</th>
				<td><input type="password" id="pwd" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="添加" id="add" onclick="add()" />
				</td>
			</tr>
		</table>
		<script>
			//全选按钮
			let selectAllBtn = document.getElementsByClassName("checkbox")[0];
			//所有的复选框
			let checkboxs = document.getElementsByClassName("checkbox");
			//表格
			let table = document.getElementById("listTable");

			//全选
			function checkAll() {
				//循环所有的复选框
				for (let i = 1; i < checkboxs.length; i++) {
					//把全选按钮的状态赋值给所有的单选按钮
					checkboxs[i].checked = selectAllBtn.checked;
				}
			}

			//单选
			function updateSelectAll() {
				//循环所有的复选框
				for (let i = 1; i < checkboxs.length; i++) {
					//只要单选框有一个取消了选中状态就跳出函数，不再循环，直接将选中按钮改成未选择状态
					if (!checkboxs[i].checked) {
						selectAllBtn.checked = false;
						return;
					}
				}
				//单选框都选中的话，全选按钮变成选中状态
				selectAllBtn.checked = true;
			}

			//单独删除
			function del(obj) {
				//obj:删除按钮	obj.parentNode:<td></td>	obj.parentNode.parentNode:<tr></tr>
				let tr = obj.parentNode.parentNode; //当前行
				table.removeChild(tr);
			}

			//多选删除
			function delAll(obj) {
				for (let i = 1; i < checkboxs.length; i++) {
					if (checkboxs[i].checked) {
						let tr = checkboxs[i].parentNode.parentNode;
						table.removeChild(tr);
						//数组的长度减小，而索引 i 仍然会自增,所以要i--
						i--;
					}
				}
			}




			//添加
			function add() {
				let num = document.getElementById("num").value; //编号
				let username = document.getElementById("username").value; //姓名
				let pwd = document.getElementById("pwd").value; //密码
				let newTr = document.createElement("tr");

				//第一列
				let td1 = document.createElement("td"); //创建td
				let input1 = document.createElement("input"); //创建复选框
				//添加input的属性
				input1.setAttribute("type", "checkbox");
				input1.setAttribute("class", "checkbox");
				input1.setAttribute("onclick", "updateSelectAll()");
				//将td添加到tr
				td1.appendChild(input1);
				//第二列
				let td2 = document.createElement("td"); //创建td
				td2.innerHTML = num;
				//第三列
				let td3 = document.createElement("td"); //创建td
				td3.innerHTML = username;
				//第四列
				let td4 = document.createElement("td"); //创建td
				td4.innerHTML = username;
				//第五列
				let td5 = document.createElement("td"); //创建td
				let input2 = document.createElement('input');
				input2.setAttribute('type', 'button');
				input2.setAttribute('value', '删除');
				input2.setAttribute('onclick', 'del(this)');
				td5.appendChild(input2);
				//添加到表格
				newTr.appendChild(td1);
				newTr.appendChild(td2);
				newTr.appendChild(td3);
				newTr.appendChild(td4);
				newTr.appendChild(td5);
				table.appendChild(newTr);
			}
		</script>
	</body>
</html>