页面中表格的增删改查

最新推荐文章于 2022-11-08 17:10:50 发布

Curry 3O

最新推荐文章于 2022-11-08 17:10:50 发布

阅读量1.6k

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/qq_42552393/article/details/96903988

版权

DOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在网页中操作表格，实现增删改查等操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格增删改查</title>
	<style>
		table{
			border-collapse: collapse;
			width: 400px;
		}
		table,td,th{
			border:1px solid #ccc;
			text-align: center;
		}
	</style>
	<script>
		var stus = [{
			id:1001,
			name:'zhangsan',
			age:12,
			gender:'男'
		},{
			id:1002,
			name:'lisi',
			age:15,
			gender:'女'
		},{
			id:1003,
			name:'tom',
			age:12,
			gender:'男'
		},{
			id:1004,
			name:'fairy',
			age:15,
			gender:'女'
		},{
			id:1005,
			name:'tom',
			age:12,
			gender:'男'
		}];
		window.onload = function(){
			var tbody = document.getElementsByTagName('tbody')[0];
			var addBtn = document.getElementById('add');
			var batchDeleteBtn = document.getElementById('batchdelete');
			// 遍历数组，放置数据
			var str = '';
			stus.forEach(function(item){
				str += `
					<tr>
						<td><input type="checkbox"></td>
						<td>`+item.name+`</td>
						<td>`+item.age+`</td>
						<td>`+item.gender+`</td>
						<td><button>删除</button></td>
					</tr>
				`;
			});
			tbody.innerHTML = str;
			//tbody给删除按钮做代理
			tbody.onclick = function(event){
				var target = event.target;
				if(target.nodeName === 'BUTTON'){
					this.removeChild(target.parentNode.parentNode);
				}
			}
			//批量删除
			batchDeleteBtn.onclick = function(){
				//获取所有用户选中的input,循环删除对应的tr
				var inputs = document.getElementsByTagName('input');
				inputs = Array.prototype.slice.call(inputs,0);
				var inputsResult = inputs.filter(function(item){
					return item.checked === true;
				});
				// console.log(inputsResult);
				if(inputsResult.length>0){
					inputsResult.forEach(function(item){
						//item是一个一个的input
						tbody.removeChild(item.parentNode.parentNode);
					});
				}else{
					alert('请选择要删除的数据');
				}
			}
			// 新增
			addBtn.onclick = function(){
				var newTr = document.createElement('tr');
				var str = `
					<td><input type="checkbox"></td>
					<td>terry</td>
					<td>12</td>
					<td>男</td>
					<td><button>删除</button></td>
				`;
				newTr.innerHTML = str;
				tbody.appendChild(newTr);
			}
		}
	</script>
</head>
<body>
	<button id="add">新增</button>
	<button id="batchdelete">批量删除</button>
	<!-- 查看数据，单条删除，批量删除，新增 -->
	<table>
		<thead>
			<tr>
				<!-- 放置input复选框 -->
				<th>编号</th>
				<th>名字</th>
				<th>年龄</th>
				<th>性别</th>
				<!-- 放置删除按钮 -->
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</body>
</html>

操作界面:
在这里插入图片描述

单项删除

勾选前面的复选框后再点击删除按钮可完成单项删除
在这里插入图片描述

批量删除

勾选多个复选框后再点击批量删除按钮可完成单项删除
在这里插入图片描述

新增数据

点击新增按钮可完成新增数据
在这里插入图片描述
（这里添加的信息的是代码里写好的数据）

Curry 3O

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
页面中表格的增删改查

在网页中操作表格，实现增删改查等操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格增删改查</title> <style> table{ border-collapse: collapse; w...
复制链接

扫一扫