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
Detailed explanation of the implementation of regular backup of MySQL database tables
Implementation of regular backup of Mysql databas...
HTML table tag tutorial (31): cell width and height attributes WIDTH, HEIGHT
By default, the width and height of the cell are ...
Linux kernel device driver kernel linked list usage notes
/******************** * Application of linked lis...
Code to display the contents of a txt book on a web page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
Methods and steps to build nginx file server based on docker
1. Create a new configuration file docker_nginx.c...
Native JS to implement login box email prompt
This article shares a native JS implementation of...
Detailed explanation of the functions and usage of MySQL common storage engines
This article uses examples to illustrate the func...
How to quickly deploy Gitlab using Docker
1. Download the gitlab image docker pull gitlab/g...
Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice
1. Background In the context of rapid updates and...
How to delete special character file names or directories in Linux
Delete a file by its inode number First use ls -i...
Some notes on modifying the innodb_data_file_path parameter of MySQL
Preface innodb_data_file_path is used to specify ...
Summary of Mysql slow query operations
Mysql slow query explanation The MySQL slow query...
JavaScript implements div mouse drag effect
This article shares the specific code for JavaScr...
Web front-end development CSS related team collaboration
The front-end development department is growing, ...
How to use indexes to optimize MySQL ORDER BY statements
Create table & create index create table tbl1...