欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)隱藏信息

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery選擇器、屬性設置用法經(jīng)驗總結(jié)

    jquery選擇器、屬性設置用法經(jīng)驗總結(jié)

    最近做項目用到了jquery。在做的過程中走了很多彎路,不停的搜索。總結(jié)出了一些jquery選擇器、屬性設置用法,供大家參考
    2013-09-09
  • jQuery使用CSS()方法給指定元素同時設置多個樣式

    jQuery使用CSS()方法給指定元素同時設置多個樣式

    這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時設置多個樣式的方法,實例分析了jQuery中css方法的使用技巧,非常具有實用價值,需要的朋友可以參考下
    2015-03-03
  • jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)

    jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)

    下面小編就為大家?guī)硪黄猨Query禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • jQuery ajax仿Google自動提示SearchSuggess功能示例

    jQuery ajax仿Google自動提示SearchSuggess功能示例

    這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結(jié)合實例形式較為詳細的分析了jQuery結(jié)合ajax與.net后臺調(diào)用sql數(shù)據(jù)庫實現(xiàn)搜索自動提示相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • jQuery中常用的遍歷函數(shù)用法實例總結(jié)

    jQuery中常用的遍歷函數(shù)用法實例總結(jié)

    這篇文章主要介紹了jQuery中常用的遍歷函數(shù)用法,以實例形式分析并總結(jié)了jquery中常見的遍歷函數(shù)使用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • JQuery中模擬image的ajaxPrefilter與ajaxTransport處理

    JQuery中模擬image的ajaxPrefilter與ajaxTransport處理

    這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實現(xiàn)代碼,代碼中包含詳細注釋,需要的朋友可以參考下
    2015-06-06
  • jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析

    jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析

    jQuery的核心思想可以簡單概括為“查詢和操作dom”,今天主要是分析一下jQuery.prototype.init選擇器構(gòu)造函數(shù),處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下,或許本文所提供的知識對你學習有所幫助
    2013-02-02
  • jQuery中prepend()方法使用詳解

    jQuery中prepend()方法使用詳解

    prepend()方法可以將指定元素插入匹配元素內(nèi)部開頭,主要用到content和selector參數(shù),這篇文章主要給大家介紹jQuery中prepend()方法使用,需要的朋友可以參考下
    2015-08-08
  • jquery實現(xiàn)用戶打分評分特效

    jquery實現(xiàn)用戶打分評分特效

    很多網(wǎng)站都應用了評分效果,讓用戶可以對正在瀏覽的文章、電影、資源等進行評分,讓網(wǎng)站增添了幾分互動效果。本文將講解如何使用jQuery來實現(xiàn)評分效果。
    2015-05-05
  • jquery實現(xiàn)垂直和水平菜單導航欄

    jquery實現(xiàn)垂直和水平菜單導航欄

    這篇文章主要為大家詳細介紹了jquery實現(xiàn)垂直和水平菜單導航欄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論