<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
width: 1000px;
text-align: center;
}
th,
td {
height: 30px;
}
.tip {
background-color: #2A4F55;
width: 230px;
height: 30px;
}
.addwindow {
background-color: white;
width: 230px;
height: 187px;
border: #2A4F55 1px solid;
display: none;
position: absolute;
left: 35%;
top: 35%;
text-align: center;
}
.close {
float: right;
height: 30px;
width: 30px;
color: white;
line-height: 30px;
background-color: #2A4F55;
border: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
//文档加载事件
var $getnum; //自增长序号
var $getdata; //本地存储数组
$(function() {
//localStorage.clear();//清空本地数据
//创建表格
createtable();
//初始化表格
Initialization();
//显示新增窗口
$(":button:eq(0)").click(adddata);
})
//创建表格
function createtable() {
var table = "<table border='1px'><thead><tr><th><input type='checkbox'></th><th>序号</th><th>姓名</th><th>电话</th><th>年龄</th></tr></thead><tbody>";
for(var i = 0; i < 30; i++) {
table += "<tr><td class = 'checkbox'></td><td class = 'id'></td><td class = 'name'></td><td class = 'phone'></td><td class = 'age'></td></tr>";
}
table += "</tbody></table>";
$("body").append(table);
}
//初始化表格数据
function Initialization() {
//判断是否存在本地数据
if(localStorage.data) {
//存在本地数据时
//获取本地数据
var getdata = localStorage.data;
var getnum = parseInt(localStorage.num);
//把字符串转换成数组对象
$getdata = JSON.parse(getdata);
$getnum = JSON.parse(getnum);
//在表格中显示数据
addTable();
} else {
//不存在本地数据时，创建一个空数组并放入本地存储
arrydata = [];
//把数组转换成字符串
var arrystr = JSON.stringify(arrydata);
//把字符串放入本地存储
localStorage.data = arrystr;
localStorage.num = 1;
}
}
//新增按钮功能设置
function adddata() {
$(":text:eq(1)").val(numgs());
//点击新增按钮显示窗口
$("#add").show();
//点击关闭新增窗口
$(".close:eq(0)").click(function() {
$("#add").hide();
})
//添加按钮提交数据
$(":button:eq(5)").click(function() {
var id = $(":text:eq(1)").val();
var name = $(":text:eq(2)").val();
var phone = $(":text:eq(3)").val();
var age = $(":text:eq(4)").val();
//把添加的数据放入对象
var obj = {
"id": id,
"name": name,
"phone": phone,
"age": age
}
//将对象放入数组
$getdata[$getdata.length] = obj;
//把数组转换成字符串放入本地存储
localStorage.data = JSON.stringify($getdata);
//在表格中显示数据
Initialization();
//自增序号
localStorage.num = $getnum + 1;
//清空输入窗
//cleardata();
//关闭窗口
$("#add").hide();
})
}
//清空输入窗
function cleardata() {
$(":text:eq(1)").val("");
$(":text:eq(2)").val("");
$(":text:eq(3)").val("");
$(":text:eq(4)").val("");
}
//在表格显示数据
function addTable() {
for(var i = 0; i < $getdata.length; i++) {
$(".checkbox:eq(" + i + ")").html("<input type='checkbox'/>");
$(".id:eq(" + i + ")").html($getdata[i].id);
$(".name:eq(" + i + ")").html($getdata[i].name);
$(".phone:eq(" + i + ")").html($getdata[i].phone);
$(".age:eq(" + i + ")").html($getdata[i].age);
}
}
//自增长序号格式
function numgs() {
if(localStorage.num < 10) {
localStorage.num = "00" + localStorage.num;
return localStorage.num;
} else if(localStorage.num < 100) {
localStorage.num = "0" + localStorage.num;
return localStorage.num;
} else {
localStorage.num = localStorage.num;
return localStorage.num;
}
}
</script>
</head>
<body>
<button>新增</button>
<button>修改</button>
<button>删除</button>
<input type="text" /><button>查询</button>
<div id="add" class="addwindow">
<div class="tip"><input type="button" value="X" class="close" /> </div><br /> 序号：
<input type="text" /><br /> 姓名：
<input type="text" /><br /> 电话：
<input type="text" /><br /> 年龄：
<input type="text" /><br /><br />
<input type="button" value="添加" />
</div>
</body>
