周末大作业增删改

最新推荐文章于 2022-07-30 11:08:14 发布
Jiangbil
最新推荐文章于 2022-07-30 11:08:14 发布
阅读量218
点赞数
分类专栏：学习笔记及心得
本文链接：https://blog.csdn.net/Jiangbil/article/details/78604531
版权
学习笔记及心得专栏收录该内容
20 篇文章 0 订阅
订阅专栏
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>增加数据，查询数据</title>  
   <style type="text/css">
    #addPerson{
        float: left;

    }
    #editPerson{
        float: left;
        display: none;
    }
   </style>
</head>  
<body>  
    <h1>人力资源管理系统</h1> 
    <div class="toolbar">
        <table id="addPerson">  
            <tr><td>员工编号：</td><td><input type="text" id="no"></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="editPerson">  
            <tr><td>员工编号：</td><td><input type="text" id="eno"></td></tr>
            <tr><td>姓名：</td><td><input type="text" id="ename"></td></tr>  
            <tr><td>Email:</td><td><input type="text" id="eemail"></td></tr>  
            <tr><td>电话号码：</td><td><input type="text" id="etel"></td></tr>  
            <tr><td>备注：</td><td><input type="text" id="ememo"></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="no" selected>员工编号</option>
                <option value="name">姓名</option>
                <option value="email">电子邮件</option>
                <option value="tel">联系号码</option>
            </select> 
            <input type="text" id="fno"> 
            <input type="button" value="检索" onclick="findStorage();">  
    </p>  
    <div id="msg">
        <table id="content" border="1" style="border: 1px dotted pink" cellpadding="50">

        </table>
    </div> 
    <script>
        function lg(a){
        console.log(a);
        }
        loadAllData();
        function loadAllData(){
            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]]["no"]+'</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 no="'+data[properties[i]]["no"]+'" onclick="deleteData(this)" id="remove">删除</button><button no="'+data[properties[i]]["no"]+'" 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.no = document.getElementById('no').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;
            person[data.no]=data;
            lg(person);
            var str = JSON.stringify(person); 
            localStorage.setItem('person',str);
            alert("数据已保存。");
            loadAllData();               
        }
        function findStorage(){ 
            var type = document.getElementById('type').value;
            var searchValue = document.getElementById('fno').value;
            var str = localStorage.getItem('person');
            var data = JSON.parse(str);
            var properties = Object.keys(data);
            for (var i=0;i<properties.length;i++){
                lg(data[properties[i]][type]);
                if(data[properties[i]][type]==searchValue){
                    tr += '<tr><td>'+data[properties[i]]["no"]+'</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 no="'+data[properties[i]]["no"]+'" onclick="deleteData(this)" id="remove">删除</button><button no="'+data[properties[i]]["no"]+'" onclick="editData(this)" id="edit">修改</button></td></tr>';
                }

            }
        document.getElementById('content').innerHTML=tr;
        }
         function deleteData(btn){

            var str = localStorage.getItem('person');
            var data = JSON.parse(str);
            //lg(data);
            var no = btn.getAttribute('no');
            delete data[no];
            //lg(data);
            var resultStr = JSON.stringify(data);  
            localStorage.setItem('person',resultStr);  
            loadAllData();
         }
          function editData(btn){
              document.getElementById('editPerson').style.display = 'block';
              var no = btn.getAttribute('no');
              var str = localStorage.getItem('person');
              lg(localStorage);
              lg(str);
              var data = JSON.parse(str);
              lg(data);
              person = data[no];
            document.getElementById('eno').value = person['no'];
            document.getElementById('ename').value = person['name'];
            document.getElementById('eemail').value = person['email'];
            document.getElementById('etel').value = person['tel'];
            document.getElementById('ememo').value = person['memo'];
          }
          function saveEdit(){
            var newdata = new   Object();
            var no = document.getElementById('eno').value;
            newdata.no = no; 
            //从修改的输入框中获取数据
            newdata.name = document.getElementById('ename').value; 
            newdata.email = document.getElementById('eemail').value; 
            newdata.tel = document.getElementById('etel').value; 
            newdata.memo = document.getElementById('ememo').value; 
            var str = localStorage.getItem('person');
            var data = JSON.parse(str);
            data[no] = newdata;
            var resultStr = JSON.stringify(data);  
            localStorage.setItem('person',resultStr); 
            loadAllData();
            document.getElementById('editPerson').style.display = 'none';


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