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实现用户信息表格的添加和删除功能
1.浏览器界面 一个简单的用户信息操作 2.html代码 <body> <form name="userForm"> <center> 用户录入 <br /> 用户名: <input id="username" name="username" type="text" size=15 /> E-mail: <input id="email"
-
jquery实现员工信息添加与删除功能
本文实例为大家分享了jquery实现员工信息添加与删除功能的具体代码,供大家参考,具体内容如下 员工表格添加用了jquery事件 主要按钮绑定事件 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript&quo
-
Jquery实现select multiple左右添加和删除功能的简单实例
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的. 具体代码如下: <center> <table> <tr align="center"> <td colspan="3"> 选择 </td> &
-
使用Bootstrap和Vue实现用户信息的编辑删除功能
使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs
-
jQuery+css3实现Ajax点击后动态删除功能的方法
本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv
-
浅谈react.js 之 批量添加与删除功能
最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把
-
Android实现彩信附件的添加与删除功能
本文实例讲述了Android实现彩信附件的添加与删除功能.分享给大家供大家参考,具体如下: 添加附件 在ComposeMessageActivity里 addAttachment(int type) 函数 根据type的不同,分成6个case case A: MediaSelectListActivity.ADD_IMAGE 用gallery选图片: MessageUtils.selectImage(this, REQUEST_CODE_ATTACH_IMAGE); 起一个intent: Int
-
jQuery实现列表的增加和删除功能
具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> <div> <table style="margin: 10px a
-
Android仿QQ个人标签添加与删除功能
最近在公司项目开发中,有一个类似于QQ个人标签的需求要完成,具体包括个人标签的添加,删除,添加过程中重复的标签会提示用户,不能够进行添加.先给大家看一下效果图. 点击标签按钮,弹出标签选择的页面,显示所有的标签:点击全部标签里面的item,选择的标签会显示在上方:再次点击相同的标签进行添加,会提示用户"标签已存在,请重新添加":点击上方已经选择好的标签,进行删除操作 业务逻辑就是这样,下面是具体实现过程: 一.界面布局: <LinearLayout android:layout_
-
vue 实现在同一界面实现组件的动态添加和删除功能
1.插入静态组件,将自己想要循环的组件显示在页面上,利用v-for进行循环操作,操作包括增删. //所有要显示的子组件,写在一个li标签,有 v-for循环. <li v-for="(item, index) in questionList" v-bind:key="index"> <el-row :gutter="20"> <el-col offset="2