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
A simple way to build a Docker environment
First, let’s understand what Docker is? Docker is...
Discuss the value of Web standards from four aspects with a mind map
I have roughly listed some values to stimulate ...
mysql join query (left join, right join, inner join)
1. Common connections for mysql INNER JOIN (inner...
Detailed usage of Vue more filter widget
This article example shares the implementation me...
Design perspective technology is an important capital of design ability
A design soldier asked: "Can I just do pure ...
A detailed introduction to Linux system configuration (service control)
Table of contents Preface 1. System Service Contr...
Detailed explanation of common methods of JavaScript arrays
Table of contents Common array methods pop() unsh...
Detailed explanation of Dockerfile to create a custom Docker image and comparison of CMD and ENTRYPOINT instructions
1. Overview There are three ways to create a Dock...
CocosCreator Universal Framework Design Network
Table of contents Preface Using websocket Constru...
Running PostgreSQL in Docker and recommending several connection tools
1 Introduction PostgreSQL is a free software obje...
Implementation of proxy_pass in nginx reverse proxy
The format is simple: proxy_pass URL; The URL inc...
Monitor changes in MySQL table content and enable MySQL binlog
Preface binlog is a binary log file, which record...
JS implements user registration interface function
This article example shares the specific code of ...
JavaScript anti-shake case study
principle The principle of anti-shake is: you can...
Mysql 5.7.19 free installation version encountered pitfalls (collection)
1. Download the 64-bit zip file from the official...