javascript实现增删改查

最新推荐文章于 2024-05-14 11:14:39 发布

周朝兵

最新推荐文章于 2024-05-14 11:14:39 发布

阅读量1.8k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/m0_45251955/article/details/103326534

版权

增删改查增删改查对于学前端的来说，可以说是必修课，在很多的网站中都会遇见这种功能，那么今天，我们就来看看如何使用js来实现正删改查。首先，我们先模拟一个后台数据，如下：var data = [ { "0":"李白", "1":"男", "2":"12", "3":"123456", "4":"我是李白" }, { "0":"小乔", "1":"女", "...

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

增删改查

增删改查对于学前端的来说，可以说是必修课，在很多的网站中都会遇见这种功能，那么今天，我们就来看看如何使用js来实现正删改查。
首先，我们先模拟一个后台数据，如下：

var data = [
	{
   
		"0":"李白",
		"1":"男",
		"2":"12",
		"3":"123456",
		"4":"我是李白"
	},
	{
   
		"0":"小乔",
		"1":"女",
		"2":"14",
		"3":"123451",
		"4":"我是小乔"
	},
	{
   
		"0":"凯",
		"1":"男",
		"2":"20",
		"3":"123452",
		"4":"我是凯"
	},
	{
   
		"0":"韩信",
		"1":"男",
		"2":"40",
		"3":"123453",
		"4":"我是韩信"
	},
	{
   
		"0":"夸父",
		"1":"女",
		"2":"18",
		"3":"123454",
		"4":"我是夸父"
	},
	{
   
		"0":"后裔",
		"1":"男",
		"2":"12",
		"3":"123455",
		"4":"我是后裔"
	},
	{
   
		"0":"阿狸",
		"1":"男",
		"2":"50",
		"3":"123456",
		"4":"我是阿狸"
	},
	{
   
		"0":"李元芳",
		"1":"女",
		"2":"32",
		"3":"223456",
		"4":"我是李元芳"
	},
	{
   
		"0":"诸葛亮",
		"1":"男",
		"2":"22",
		"3":"323456",
		"4":"我是诸葛亮"
	},
	{
   
		"0":"典韦",
		"1":"男",
		"2":"30",
		"3":"423456",
		"4":"我是典韦"
	}
]

后台数据模拟好了以后就可以开始写了，在写之前，先使用HTML来建立一个表格，当然，也可以使用纯js来写，先创建元素在添加到页面上，在这里我们不做介绍，有兴趣的可以自己去写。表格建立如下所示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<style type="text/css">
	tr{
   
		border: 1px solid;
		display: "";
	}
	th{
   
		border: 1px solid;
		width: 111px;
	}
	td{
   
		border: 1px solid;
		text-align: center;
	}
	table{
   
		border: 1px solid;
	}
	.tianjia{
   
		width: 260px;
		height: 300px;
		border: 1px solid;
	}
	p{
   
		margin-left: 10px;
		margin-top: 25px;
	}
	.x1{
   
		margin-left: 30px;
	}
	.x3{
   
		margin-left: 30px;
	}
	.qud{
   
		margin-left: 55px;
	}
	.xiu{
   
		margin-left: 55px;
	}
	.tianjia{
   
		position: absolute;
		margin-left: 300px;
		z-index: 1;
		background-color: #eee;
		display: none;
	}
	.zzc{
   
		position: absolute;
		width: 1000px;
		height: 800px;
		background-color: #111;
		opacity: 0.4;
		display: none;

	}
	.xiugai{
   
		width: 260px;
		height: 300px;
		border: 1px solid;
		position: absolute;
		margin-left: 300px;
		z-index: 1;
		background-color: #eee;
		display: none;
	}
</style>
<body>
<div class="zzc"></div>
	姓名：<input type="text" name="" value="请输入">
	性别：<input type="text" name="" value="请输入">
	电话：<input type="text" name="" value="请输入">
	<button class="chaxun">查询</button>
	<button class = "tianjia1">添加</button>
	<button class="sanchu">删除</button>
	<table>
		<thead>
			<tr class="tt1">
				<th>
					<input type="checkbox" class="quax1">
					<span>全选</span>
				</th>
				<th>
					<span>姓名</span

最低0.47元/天解锁文章

周朝兵

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
4
评论
javascript实现增删改查

增删改查增删改查对于学前端的来说，可以说是必修课，在很多的网站中都会遇见这种功能，那么今天，我们就来看看如何使用js来实现正删改查。首先，我们先模拟一个后台数据，如下：var data = [ { "0":"李白", "1":"男", "2":"12", "3":"123456", "4":"我是李白" }, { "0":"小乔", "1":"女", "...
复制链接

扫一扫

专栏目录