jquery實現(xiàn)員工信息添加與刪除功能
本文實例為大家分享了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。在做的過程中走了很多彎路,不停的搜索。總結(jié)出了一些jquery選擇器、屬性設置用法,供大家參考2013-09-09jQuery禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨Query禁用快捷鍵例如禁用F5刷新 禁用右鍵菜單等的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jQuery ajax仿Google自動提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結(jié)合實例形式較為詳細的分析了jQuery結(jié)合ajax與.net后臺調(diào)用sql數(shù)據(jù)庫實現(xiàn)搜索自動提示相關(guān)操作技巧,需要的朋友可以參考下2019-03-03jQuery中常用的遍歷函數(shù)用法實例總結(jié)
這篇文章主要介紹了jQuery中常用的遍歷函數(shù)用法,以實例形式分析并總結(jié)了jquery中常見的遍歷函數(shù)使用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實現(xiàn)代碼,代碼中包含詳細注釋,需要的朋友可以參考下2015-06-06jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析
jQuery的核心思想可以簡單概括為“查詢和操作dom”,今天主要是分析一下jQuery.prototype.init選擇器構(gòu)造函數(shù),處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下,或許本文所提供的知識對你學習有所幫助2013-02-02