html5 localstorage模拟数据库+js实现表格增删改操作

最新推荐文章于 2024-02-03 20:20:47 发布

Supreme_lwl

最新推荐文章于 2024-02-03 20:20:47 发布

阅读量711

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42515626/article/details/104674761

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

界面：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学生信息基本操作</title>
		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<div>
			<form class="index-form" id="index-form">
				<span>姓名：</span>
				<input type="text" name="stuName" class="stuName" id="stuName">
				<span class="msg" id="msg1"></span>
				<br>
				<span>学号：</span>
				<input type="text" name="stuNumber" class="stuNumber" id="stuNumber">
				<span class="msg" id="msg2"></span>
				<br>
				<span>年龄：</span>
				<input type="text" name="stuAge" class="stuAge" id="stuAge">
				<span class="msg" id="msg3"></span>
				<br>
				<div class="toolBar">
					<input type="button" name="addBtn" value="新增" onclick="addData()">
					<input type="button" name="saveBtn" value="保存" disabled="disabled" id="saveBtn" onclick="saveEdit(this)">
				</div>
			</form>
		</div>
		<hr>
		<table class="index-table" id="index-table">
			<thead>
				<tr>
					<th>操作</th>
					<th>序号</th>
					<th>姓名</th>
					<th>学号</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td>
						<input type="button" name="delBtn" value="删除">
						<input type="button" name="editBtn" value="编辑">
					</td>
					<td>1</td>
					<td>张三</td>
					<td>2017401152</td>
					<td>20</td>
				</tr>
				 -->
			</tbody>
		</table>
	</body>
</html>

css代码：

form>span{
	font-weight: bold;
	font-size: 18px;
}
.index-form{
	margin-left: 2%;
	margin-top:2%;
}
.index-form>input{
	margin: 5px;
	height: 30px;
}
.toolBar{
	margin:10px 20px 30px 20px;
}
input[type="button"]{
	background-color: #4cAF50;
	border: none;
	color: white;
	padding: 5px 20px;
	text-align: center;
	display: inline-block;
	font-size: 16px;
	border-radius: 5px;
	margin-left: 5px;
	width: 100px;
	cursor: pointer;
}
input:disabled{
	border: 1px solid #9e9494;
	background-color: #9e9494;
	color: white;
	cursor: auto;
}
table{
	margin-top:30px;
	width: 1000px;
	border-collapse: collapse;
	margin-left: 2%;
}
th,td{
	border: 1px gray solid;
	text-align: center;
	padding: 10px;
}
th{
	font-weight: bold;
	background-color: #4cAF50;
	width: 20%;
}
th:first-child{
	width:30%;
}
tr:nth-child(even){
	background-color: #eee;
}
.msg{
	color:red;
}

js代码：

//获取学生数据
var getStuData = function(){

	var storage = window.localStorage;
	var stu = JSON.parse(storage.getItem("stu"));
	return stu;
	
}

//展示数据
var displayData = function(){
	var stu = getStuData();

	var tbody = document.getElementById("index-table");
	var rows = tbody.rows.length-1;

	for(var i=rows;i<stu.length;i++){
		var tr = document.createElement("tr");

		var operate = document.createElement("td");
		operate.innerHTML = 
		"<td><input type='button' name='delBtn' value='删除' onclick='delData(this)'><input type='button' name='editBtn' value='编辑' onclick='editData(this)'></td>";
		var order = document.createElement("td");
		order.innerHTML = i+1;
		order.className="order";
		var stuName = document.createElement("td");
		stuName.innerHTML = stu[i].stuName;
		stuName.className = "stuName";
		var stuNumber = document.createElement("td");
		stuNumber.innerHTML = stu[i].stuNumber;
		stuNumber.className = "stuNumber";
		var stuAge = document.createElement("td");
		stuAge.innerHTML = stu[i].stuAge;
		stuAge.className = "stuAge";
		// console.log(order.nodeType());
		tr.appendChild(operate);
		tr.appendChild(order);
		tr.appendChild(stuName);
		tr.appendChild(stuNumber);
		tr.appendChild(stuAge);

		tbody.appendChild(tr);
	}
}

//保存数据
var saveData = function(stu){
	var storage = window.localStorage;
	storage.setItem("stu",JSON.stringify(stu));

	displayData();
}
// var stu=[
// 		{stuName:"张三",stuNumber:"2017401152",stuAge:20},
// 		{stuName:"李四",stuNumber:"2017401152",stuAge:21},
// 	]

// 	var storage = window.localStorage;
// 	storage.setItem("stu",JSON.stringify(stu));


//页面初始化
window.onload = function(){
	displayData();
	document.getElementById("stuName").focus();//获取焦点
}

//增加学生信息
var addData = function(){

	var data = getStuData();
	
	var stuName = document.getElementById("stuName").value;
	var stuNumber = document.getElementById("stuNumber").value;
	var stuAge = document.getElementById("stuAge").value;

	var t = check(stuName,stuNumber,stuAge);
		
	if(t == 0){
		return ;
	}

	var stu = {stuName:stuName,stuNumber:stuNumber,stuAge:stuAge};
	
	data.push(stu);
	saveData(data);
	clearInput();

}

//清空输入框
var clearInput = function(){
	document.getElementById("stuName").value = "";
	document.getElementById("stuNumber").value = "";
	document.getElementById("stuAge").value = "";
}

//删除学生数据
var delData = function(e){
	if(confirm("确认删除改行学生信息吗？")){
		var tr = e.closest("tr")
		tr.remove();
		
		var stu = getStuData();
		stu.splice(tr.rowIndex-1,1);
		saveData(stu);
		location.reload('index.heml');//刷新页面
	}
}

//编辑数据
var editData = function(e){
	var tr = e.closest("tr");
	document.getElementById("stuName").value = tr.getElementsByClassName("stuName")[0].innerHTML;
	document.getElementById("stuNumber").value = tr.getElementsByClassName("stuNumber")[0].innerHTML;
	document.getElementById("stuAge").value = tr.getElementsByClassName("stuAge")[0].innerHTML;

	document.getElementById("saveBtn").removeAttribute("disabled");
	document.getElementById("saveBtn").name = tr.rowIndex;
	
}

//保存编辑的数据
var saveEdit = function(e){

	if(confirm("确认保存改信息？")){

		var stuName = document.getElementById("stuName").value;
		var stuNumber = document.getElementById("stuNumber").value;
		var stuAge = document.getElementById("stuAge").value;

		var t = check(stuName,stuNumber,stuAge);

		if(t == 0){
			return ;
		}

		var row = e.getAttribute("name");
		
		var stu = getStuData();

		stu[row-1].stuName = stuName;
		stu[row-1].stuNumber = stuNumber;
		stu[row-1].stuAge = stuAge;

		document.getElementsByClassName("stuName")[row].innerHTML = stuName;
		document.getElementsByClassName("stuNumber")[row].innerHTML = stuNumber;
		document.getElementsByClassName("stuAge")[row].innerHTML = stuAge;
		saveData(stu);
		clearInput();
		document.getElementById("saveBtn").setAttribute("disabled","disabled");
	}

}

var check = function(stuName,stuNumber,stuAge){
	var msg;
	var code;
	if(stuName.length == 0){
		msg = "姓名不能为空!";
		code = 1;
	}else if(stuNumber.length == 0){
		msg = "学号不能为空!";
		code = 2;
	}else if(stuAge.length == 0){
		msg = "年龄不能为空!";
		code = 3;
	}else{
		code = 0;//成功;
		msg = "";
	}

	if(code != 0){
		if(code == 1){
			document.getElementById("msg1").innerHTML = msg;
			document.getElementById("stuName").focus();//获取焦点

		}else if(code == 2){
			document.getElementById("msg2").innerHTML = msg;
			document.getElementById("stuNumber").focus();//获取焦点
		}else{
			document.getElementById("msg3").innerHTML = msg;
			document.getElementById("stuAge").focus();//获取焦点
		}

		return 0;
	}else{

		document.getElementById("msg1").innerHTML = msg;
		document.getElementById("msg2").innerHTML = msg;
		document.getElementById("msg3").innerHTML = msg;

		return 1;
	}
}

Supreme_lwl

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
html5 localstorage模拟数据库+js实现表格增删改操作

界面：html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>学生信息基本操作</title> <link href="css/index.css" rel="stylesheet" type="text/css"/&g...
复制链接

扫一扫

专栏目录