事件

来源：互联网发布：mysql case syntax 编辑：程序博客网时间：2024/04/28 23:09

这是通过表格来实现增删改查，使用了localstore让数据保存在浏览器中从而调用。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>增加数据，查询数据</title>
<style type="text/css">
#biao1{
float:left;
}
#biao2{
float:left;
display:none;
}
</style>
</head>
<body>
<h1>人力资源管理系统</h1>
<div id="bian">
<table id="biao1">
<tr><td>员工编号：</td><td><input type="text" id="nu"></td></tr>
<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
<tr><td>Email：</td><td><input type="text" id="email"></td></tr>
<tr><td>电话号码：</td><td><input type="text" id="tel"></td></tr>
<tr><td>备注：</td><td><input type="text" id="memo"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveStorage()"></td>
</tr>
</table>

<table id="biao2">
<tr><td>员工编号：</td><td><input type="text" id="anu"></td></tr>
<tr><td>姓名：</td><td><input type="text" id="aname"></td></tr>
<tr><td>Email：</td><td><input type="text" id="aemail"></td></tr>
<tr><td>电话号码：</td><td><input type="text" id="atel"></td></tr>
<tr><td>备注：</td><td><input type="text" id="amemo"></td></tr>
<tr>
<td></td>
<td><input type="button" value="修改" onclick="saveEdit()"></td>
</tr>
</table>
<div style="clear:both;"></div>
</div>
<hr>
<p>请选择搜索类型：
<select name="type" id="type">
<option value="nu" selected>员工编号</option>
<option value="name">姓名</option>
<option value="email">电子邮件</option>
<option value="tel">联系号码</option>
</select>
<input type="text" id="sou">
<input type="button" value="检索" onclick="findStorage()">
</p>
<div id="msg">
<table id="content" border="1" style="border:1px dotted blue" cellpadding="50">
</table>
</div>
<script type="text/javascript">
localStorage.clear();
function lg(a){
console.log(a);
}
loadAllDate;
function loadAllDate(){
var str=localStorage.getItem('person');
var data=JSON.parse(str);
if(data){
var properties=Object.keys(data);
}else{
return;
}
var tr='<tr><th>员工编号</th><th>姓名</th><th>Email</th><th>电话号码</th><th>备忘录</th><th>操作</th></tr>';
for(var i=0;i<properties.length;i++){
tr += '<tr><td>'+data[properties[i]]["nu"]+'</td><td>'+data[properties[i]]["name"]+'</td><td>'+data[properties[i]]["email"]+'</td><td>'+data[properties[i]]["tel"]+'</td><td>'+data[properties[i]]["memo"]+'</td><td><button nu="'+data[properties[i]]["nu"]+'" onclick="deleteData(this)" id="remove">删除</button><button nu="'+data[properties[i]]["nu"]+'" onclick="editData(this)" id="remove">修改</button></td></tr>';
}
document.getElementById('content').innerHTML = tr;
}
function saveStorage(){
var person;
if(localStorage.getItem('person')){
person=JSON.parse(localStorage.getItem('person'));
}else{
var person=new Object();
}
var data=new Object();
data.nu=document.getElementById('nu').value;
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
data.memo = document.getElementById('memo').value;
lg(person);
person[data.nu]=data;
lg(person);
var str=JSON.stringify(person);
localStorage.setItem('person',str);
lg(localStorage);
loadAllDate();
}
function findStorage(){
var type=document.getElementById('type').value;
var searchValue=document.getElementById('sou').value;
var str=localStorage.getItem('person');
var data=JSON.parse(str);
var properties=Object.keys(data);
var tr='<tr><th>员工编号</th><th>姓名</th><th>Email</th><th>电话号码</th><th>备忘录</th><th>操作</th></tr>';
for(var i=0;i<properties.length;i++){
if(data[properties[i]][type]==searchValue){
tr += '<tr><td>'+data[properties[i]]["nu"]+'</td><td>'+data[properties[i]]["name"]+'</td><td>'+data[properties[i]]["email"]+'</td><td>'+data[properties[i]]["tel"]+'</td><td>'+data[properties[i]]["memo"]+'</td><td><button nu="'+data[properties[i]]["nu"]+'" onclick="deleteData(this)" id="remove">删除</button><button nu="'+data[properties[i]]["nu"]+'" onclick="editData(this)" id="remove">修改</button></td></tr>';
}
}
document.getElementById('content').innerHTML=tr;
}
function deleteData(btn){
var str=localStorage.getItem('person');
var data=JSON.parse(str);
var nu=btn.getAttribute('nu');
delete data[nu];
var tt=JSON.stringify(data);
localStorage.setItem('person',tt);
loadAllDate();
}
function editData(btn){
document.getElementById('biao2').style.display='block';
var str=localStorage.getItem('person');
var data=JSON.parse(str);
var nu=btn.getAttribute('nu');
var person=data[nu];
document.getElementById('anu').disabled = 'true';
document.getElementById('anu').value = person['nu'];
document.getElementById('aname').value = person['name'];
document.getElementById('aemail').value = person['email'];
document.getElementById('atel').value = person['tel'];
document.getElementById('amemo').value = person['memo'];
}
function saveEdit(){
var newData = new Object();
var nu = document.getElementById('anu').value;
newData.nu = nu;
newData.name = document.getElementById('aname').value;
newData.email = document.getElementById('aemail').value;
newData.tel = document.getElementById('atel').value;
newData.memo = document.getElementById('amemo').value;
var str = localStorage.getItem('person');
var data = JSON.parse(str);
data[nu] = newData;
var resultStr = JSON.stringify(data);
localStorage.setItem('person',resultStr);
loadAllDate();
document.getElementById('biao2').style.display = 'none';
}

</script>
</body>
</html>

阅读全文

0 0