11月17日周末作业

最新推荐文章于 2023-03-11 14:32:01 发布

studyit10086

最新推荐文章于 2023-03-11 14:32:01 发布

阅读量171

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/studyit10086/article/details/78578553

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

资源管理系统增删改

<!DOCTYPE html>  
<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">编号</option>
            <option value="name">姓名</option>
            <option value="email">Email</option>
            <option value="tel">电话号码</option>
        </select>

        <input type="text" id="fno">  
        <input type="button" value="检索" onclick="findStorage('msg');">  
    </p>  
    <div id="msg">
    <table id="content" border="1px" cellpadding="50px" style="border:">
        <!-- <tr>
            <th></th><th></th><th></th><th></th><th></th><th></th>
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td><td></td><td></td>
        </tr> -->
    </table>
    </div>
    <script type="text/javascript">
        function loadAll(){
            var data=JSON.parse(localStorage.getItem('person'))
            var properties=Object.keys(data)

            var tr='<tr><th>编号</th><th>姓名</th><th>Email</th><th>电话号码</th><th>备注</th><th>操作</th></tr>'
            if(data){
                for(i=0;i<properties.length;i++){
                    var delNo=data[properties[i]].no
                    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="'+delNo+'" onclick="del(this)">删除</button><button no="'+delNo+'" onclick="edit(this)">修改</button></td></tr>'
                }
                document.getElementById('content').innerHTML=tr
            }

        }


        function lg(a){
            console.log(a);
        }
        function saveStorage(){
        var person;
        if(localStorage.getItem('person')){
            person=JSON.parse(localStorage.getItem('person'))
        }else{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;
        var str=JSON.stringify(person)
        localStorage.setItem('person',str)
        alert('数据已保存')
        loadAll();

        }

        function findStorage(){
            var type=document.getElementById('type').value
            var searchValue=document.getElementById('fno').value

            var data=JSON.parse(localStorage.getItem('person'))
            var properties=Object.keys(data)
            var tr='<tr><th>编号</th><th>姓名</th><th>Email</th><th>电话号码</th><th>备注</th><th>操作</th></tr>'
            for(i=0;i<properties.length;i++){
                var delNo=data[properties[i]].no

                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="'+delNo+'"  onclick="del(this)">删除</button><button onclick="edit(this)">修改</button></td></tr>'

                }
            lg(tr)
            }
            document.getElementById('content').innerHTML=tr

        }


        function del(aa){
            var data=JSON.parse(localStorage.getItem('person'))
            var bb=aa.getAttribute('no')
            //lg(bb)
            delete data[bb]
            var str=JSON.stringify(data)
            localStorage.setItem('person',str)
            alert('数据已删除')
            loadAll()
        }


        function edit(aa){
            document.getElementById('editPerson').style.display='block'
            bb=aa.getAttribute('no')
            var data=JSON.parse(localStorage.getItem('person'))

            document.getElementById('eno').disabled=true

            document.getElementById('eno').value=data[bb].no
            document.getElementById('ename').value=data[bb].name
            document.getElementById('eemail').value=data[bb].email
            document.getElementById('etel').value=data[bb].tel
            document.getElementById('ememo').value=data[bb].memo



        }
        function saveEdit(){
        var bb=document.getElementById('eno').value
        var data=JSON.parse(localStorage.getItem('person'))
        data[bb].name=document.getElementById('ename').value
        data[bb].email=document.getElementById('eemail').value
        data[bb].tel=document.getElementById('etel').value
        data[bb].memo=document.getElementById('ememo').value
        var str=JSON.stringify(data)
        localStorage.setItem('person',str)
        document.getElementById('editPerson').style.display='none'
        loadAll();
        }
    </script>
</body>  

</html>

studyit10086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11月17日周末作业

资源管理系统增删改<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>增加数据，查询数据</title> <style type="text/css"> #addPerson{ float:left; }
复制链接

扫一扫