jquery实现员工信息添加与删除功能

更新时间：2021年09月16日 15:43:20 作者：01？

这篇文章主要为大家详细介绍了利用jquery制作简易的员工信息添加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现员工信息添加与删除功能的具体代码，供大家参考，具体内容如下

员工表格添加用了jquery事件

主要按钮绑定事件

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function (){
            //显示隐藏员工资料按钮buttton1绑定事件
            $("#button1").click(function (){
                $("#d1").toggle()
                $("#employeeTable").toggle()
                if($("#d1").is(":hidden")){
                    $("#button1").text("显示员工信息")
                }else{
                    $("#button1").text("隐藏员工信息")
                }
            })
 
            //显示隐藏员工资料按钮buttton2绑定事件
            $("#button2").click(function (){
                $("#f1").toggle()
                $("#formDiv").toggle()
                //更换按钮字
                if($("#f1").is(":hidden")){
                    $("#button2").text("显示添加员工信息")
                }else{
                    $("#button2").text("隐藏添加员工信息")
                }
            })
 
            //清除按钮绑定文本清除事件
            $("#b1").click(function(){
                $("#name").val("")
            })
            $("#b2").click(function(){
                $("#sex").val("")
            })
            $("#b3").click(function(){
                $("#phone").val("")
            })
            $("#b4").click(function(){
                $("#post").val("")
            })
 
            //员工信息删除函数复用创建
            var detelefun=function (){
                var detele=$(this).parent().parent()
                var tip=detele.find("td:first").text()
                if(confirm("是否删除"+tip+"吗？")){
                    detele.remove()
                }
                return false
            }
 
 
 
            //添加按钮绑定添加事件
            $("#button3").click(function (){
                var n=$("#name").val()
                var se=$("#sex").val()
                var ph=$("#phone").val()
                var po=$("#post").val()
                var tab=$("<tr>\n" +
                    "     <td>"+n+"</td>\n" +
                    "     <td>"+se+"</td>\n" +
                    "   <td align=\"center\">"+ph+"</td>\n" +
                    "      <td>"+po+"</td>\n" +
                    "      <td><a href=\"#\">删除</a> </td><!--员工信息删除-->\n" +
                    "            </tr>")
                tab.appendTo($("#employeeTable"))
                tab.find("a").click(detelefun)
            })
 
            //删除按钮绑定事件
            $("a").click(detelefun)
 
        })
 
    </script>
</head>

员工资料删除

<body>
    <div style="position: relative">
        <img src="../img/building.jpg" width="1260" height="600" >
       <font style="color: #0044DD" size="30" ><div style="position: absolute;z-index: 2;left: 400px;top: 60px">欢迎进入员工资料管理</div></font>
        <!--标题-->
        <button id="button1" style="color: #0050D0; position: absolute;z-index: 6;left: 150px;top: 150px;">显示员工资料</button>
        <button id="button2" style="color: #0050D0;position: absolute;z-index: 6;left: 900px;top: 150px">显示添加员工信息</button>
        <!--显示和隐藏员工信息按钮-->
    </div><br/>
 
<table id="panel" >
    <div id="d1" style="position: absolute;z-index: 2;left: 150px;top: 180px" hidden="hidden">    <!--员工信息表格-->
        <font size="5" color="blue"><h4>员工信息</h4></font><!--确定字体大小-->
        <table hidden="hidden" id="employeeTable" border="1" cellspacing="0" style="background: cornflowerblue;position: absolute;z-index: 2;left: 10px;top: 250px" width="400" >
            <!--设置表格位置-->
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td align="center">电话</td>
                 <td>职务</td>
                  <td></td>
             </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td align="center">13623233322</td>
                <td>经理</td>
                <td><a href="#" >删除</a> </td><!--员工信息删除-->
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td align="center">13727893322</td>
                <td>员工</td>
                <td><a href="#" >删除</a> </td>
            </tr>
            <tr>
                <td>小白</td>
                <td>女</td>
                <td align="center">13727123322</td>
                <td>员工</td>
                <td><a href="#" >删除</a> </td>
            </tr>
         </table>
    </div>
 
 
    <font id="f1" hidden="hidden" size="5" style=" color: blue;position: absolute;z-index: 2;left: 900px;top: 180px"><h4>员工信息添加</h4></font>
    <table id="formDiv" hidden="hidden" border="1" cellspacing="0" style="background: cornflowerblue;position: absolute;z-index: 2;left: 820px;top: 250px"  width="300 ">
       <!--添加员工资料-->
        <tr>
            <td>姓名</td>
            <td><input type="text" id="name" > </td>
            <td><button id="b1">清除</button> </td><!--清空文本-->
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="text" id="sex" > </td>
            <td><button id="b2">清除</button> </td>
        </tr>
        <tr>
            <td>电话</td>
            <td><input type="text" id="phone" > </td>
            <td><button id="b3">清除</button>  </td>
        </tr>
        <tr>
            <td>职务</td>
            <td><input type="text" id="post" > </td>
            <td><button id="b4">清除</button>  </td>
        </tr>
        <tr><td colspan="3" align="center"><button id="button3">添加</button></td></tr>
    </table>
 
 
</table>
</body>
</html>

利用jquery中的toggle()来实现隐藏于显示，用if（is（“：hidden”））来实现：当信息隐藏时，按钮显示显示信息，当信息显示时，按钮文字出现隐藏信息

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery实现用户信息表格的添加和删除功能

jquery选择器、属性设置用法经验总结
最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些jquery选择器、属性设置用法，供大家参考
2013-09-09
jQuery使用CSS()方法给指定元素同时设置多个样式
这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jQuery禁用快捷键例如禁用F5刷新禁用右键菜单等的简单实现
下面小编就为大家带来一篇jQuery禁用快捷键例如禁用F5刷新禁用右键菜单等的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
jQuery ajax仿Google自动提示SearchSuggess功能示例
这篇文章主要介绍了jQuery ajax仿Google自动提示SearchSuggess功能,结合实例形式较为详细的分析了jQuery结合ajax与.net后台调用sql数据库实现搜索自动提示相关操作技巧,需要的朋友可以参考下
2019-03-03
jQuery中常用的遍历函数用法实例总结
这篇文章主要介绍了jQuery中常用的遍历函数用法,以实例形式分析并总结了jquery中常见的遍历函数使用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
这篇文章主要介绍了JQuery中模拟image的ajaxPrefilter与ajaxTransport处理,本文直接给出模拟实现代码,代码中包含详细注释,需要的朋友可以参考下
2015-06-06
jQuery.prototype.init选择器构造函数源码思路分析
jQuery的核心思想可以简单概括为“查询和操作dom”，今天主要是分析一下jQuery.prototype.init选择器构造函数，处理选择器函数中的参数,感兴趣的朋友可以了解下，或许本文所提供的知识对你学习有所帮助
2013-02-02
jQuery中prepend（）方法使用详解
prepend（）方法可以将指定元素插入匹配元素内部开头，主要用到content和selector参数，这篇文章主要给大家介绍jQuery中prepend（）方法使用，需要的朋友可以参考下
2015-08-08
jquery实现用户打分评分特效
很多网站都应用了评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。
2015-05-05
jquery实现垂直和水平菜单导航栏
这篇文章主要为大家详细介绍了jquery实现垂直和水平菜单导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08

jquery实现员工信息添加与删除功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具