jquery實現(xiàn)員工信息添加與刪除功能

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

這篇文章主要為大家詳細介紹了利用jquery制作簡易的員工信息添加與刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)員工信息添加與刪除功能的具體代碼，供大家參考，具體內(nèi)容如下

員工表格添加用了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("")
            })
 
            //員工信息刪除函數(shù)復用創(chuàng)建
            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>經(jīng)理</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()來實現(xiàn)隱藏于顯示，用if（is（“：hidden”））來實現(xiàn)：當信息隱藏時，按鈕顯示顯示信息，當信息顯示時，按鈕文字出現(xiàn)隱藏信息