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
CSS pixels and solutions to different mobile screen adaptation issues
Pixel Resolution What we usually call monitor res...
Detailed explanation of scheduled tasks for ordinary users in Linux
Preface Ordinary users define crontab scheduled t...
About the problems of congruence and inequality, equality and inequality in JS
Table of contents Congruent and Incongruent congr...
In-depth understanding of umask in new linux file permission settings
Preface The origin is a question 1: If your umask...
How to use Antd's Form component in React to implement form functions
1. Construction components 1. A form must contain...
How to use echarts to visualize components in Vue
echarts component official website address: https...
How to use resident nodes for layer management in CocosCreator
CocosCreator version: 2.3.4 Most games have layer...
Detailed steps to change the default password when installing MySQL in Ubuntu
Step 1: Enter the directory: cd /etc/mysql, view ...
How to quickly repair corrupted MySQL database files using the myisamchk and mysqlcheck tools
Because the server's database hard disk space...
Detailed explanation of data sharing between Vue components
Table of contents 1. In project development, the ...
CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox
Website compatibility debugging is really annoyin...
12 types of component communications in Vue2
Table of contents 1. props 2..sync 3.v-model 4.re...
How to install MySQL 8.0 and log in to MySQL on MacOS
Follow the official tutorial, download the instal...
In-depth analysis of the role of HTML <!--...--> comment tags
When we check the source code of many websites, w...
Detailed explanation of Java calling ffmpeg to convert video format to flv
Detailed explanation of Java calling ffmpeg to co...