jQuery implements the function of adding and deleting employee information
|
This article shares the specific code of jQuery to implement the functions of adding and deleting employee information for your reference. The specific content is as follows The employee table is added using jquery events
Main button binding event
<!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 (){
//Show and hide employee information button button1 binding event $("#button1").click(function (){
$("#d1").toggle()
$("#employeeTable").toggle()
if($("#d1").is(":hidden")){
$("#button1").text("Display employee information")
}else{
$("#button1").text("Hide employee information")
}
})
//Show and hide employee information button button2 binding event $("#button2").click(function (){
$("#f1").toggle()
$("#formDiv").toggle()
//Change button wordif($("#f1").is(":hidden")){
$("#button2").text("Show added employee information")
}else{
$("#button2").text("Hide add employee information")
}
})
//Clear button binding text clear event $("#b1").click(function(){
$("#name").val("")
})
$("#b2").click(function(){
$("#sex").val("")
})
$("#b3").click(function(){
$("#phone").val("")
})
$("#b4").click(function(){
$("#post").val("")
})
//Employee information deletion function reuse creation var detelefun = function () {
var delete = $(this).parent().parent()
var tip = detele.find("td:first").text()
if(confirm("Do you want to delete "+tip+"?")){
delete.remove()
}
return false
}
//Add button binding add event $("#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=\"#\">Delete</a> </td><!--Employee information deletion-->\n" +
" </tr>")
tab.appendTo($("#employeeTable"))
tab.find("a").click(detelefun)
})
//Delete button binding event $("a").click(detelefun)
})
</script>
</head>Employee data deletion
<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">Welcome to employee information management</div></font>
<!--Title-->
<button id="button1" style="color: #0050D0; position: absolute;z-index: 6;left: 150px;top: 150px;">Show employee information</button>
<button id="button2" style="color: #0050D0;position: absolute;z-index: 6;left: 900px;top: 150px">Show added employee information</button>
<!--Show and hide employee information button-->
</div><br/>
<table id="panel" >
<div id="d1" style="position: absolute;z-index: 2;left: 150px;top: 180px" hidden="hidden"> <!--Employee Information Table-->
<font size="5" color="blue"><h4>Employee Information</h4></font><!--Determine the font size-->
<table hidden="hidden" id="employeeTable" border="1" cellspacing="0" style="background: cornflowerblue;position: absolute;z-index: 2;left: 10px;top: 250px" width="400" >
<!--Set table position-->
<tr>
<td>Name</td>
<td>Gender</td>
<td align="center">Telephone</td>
<td>Position</td>
<td></td>
</tr>
<tr>
<td>Xiao Ming</td>
<td>Male</td>
<td align="center">13623233322</td>
<td>Manager</td>
<td><a href="#" >Delete</a> </td><!--Employee information deletion-->
</tr>
<tr>
<td>Zhang San</td>
<td>Male</td>
<td align="center">13727893322</td>
<td>Employees</td>
<td><a href="#" >Delete</a> </td>
</tr>
<tr>
<td>Xiaobai</td>
<td>Female</td>
<td align="center">13727123322</td>
<td>Employees</td>
<td><a href="#" >Delete</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>Add employee information</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 ">
<!--Add employee information-->
<tr>
<td>Name</td>
<td><input type="text" id="name" > </td>
<td><button id="b1">Clear</button> </td><!--Clear text-->
</tr>
<tr>
<td>Gender</td>
<td><input type="text" id="sex" > </td>
<td><button id="b2">Clear</button> </td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" id="phone" > </td>
<td><button id="b3">Clear</button> </td>
</tr>
<tr>
<td>Position</td>
<td><input type="text" id="post" > </td>
<td><button id="b4">Clear</button> </td>
</tr>
<tr><td colspan="3" align="center"><button id="button3">Add</button></td></tr>
</table>
</table>
</body>
</html>Use toggle() in jQuery to hide and show, and use if(is(":hidden")) to achieve: when the information is hidden, the button displays the display information, and when the information is displayed, the button text appears hidden information
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to write a MySQL backup script
>>: How to quickly import data into MySQL
Recommend
How to solve the problem of invalid left join in MySQL and the precautions for its use
Mysql left join is invalid and how to use it When...
Introduction to HTML Chinese Character Encoding Standard
In HTML, you need to specify the encoding used by...
Detailed graphic tutorial on installing centos7 virtual machine in Virtualbox
1. Download centos7 Download address: https://mir...
SSH port forwarding to achieve intranet penetration
The machines in our LAN can access the external n...
Example of how to build a Mysql cluster with docker
Docker basic instructions: Update Packages yum -y...
How to set horizontal navigation structure in Html
This article shares with you two methods of setti...
MySQL 8.0.26 installation and simplified tutorial (the most complete on the Internet)
Table of contents 1. Download MySQL 1.1 Download ...
Vue implements form validation function
This article mainly describes how to implement fo...
JavaScript code to implement a simple calculator
This article example shares the specific code of ...
The best way to automatically mount shared directories on Ubuntu 16.04 startup under Virtualbox
People who use virtual machines usually set up sh...
Why is it not recommended to use index as the key attribute value in Vue?
Table of contents Preface The role of key The rol...
Method of Vue component document generation tool library
Table of contents Parsing .vue files Extract docu...
How to use Dockerfile to create a mirror of the Java runtime environment
The current environment is: Centos 7.5 docker-ce ...
How to implement image mapping with CSS
1. Introduction Image maps allow you to designate...
How to run MySQL using docker-compose
Directory Structure . │ .env │ docker-compose.yml...