Using jQuery to make simple addition and deletion of employee information

01? 2022-02-13 07:34:43 阅读数:394

using jquery make simple addition

Employee form added with jquery event

Main button binding events

<!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 or hide employee data button buttton1 The binding event
$("#button1").click(function (){
$("#d1").toggle()
$("#employeeTable").toggle()
if($("#d1").is(":hidden")){
$("#button1").text(" Show employee information ")
}else{
$("#button1").text(" Hide employee information ")
}
})
// Show or hide employee data button buttton2 The binding event
$("#button2").click(function (){
$("#f1").toggle()
$("#formDiv").toggle()
// Replace button word
if($("#f1").is(":hidden")){
$("#button2").text(" Display the information of the added employee ")
}else{
$("#button2").text(" Hide and 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 detele=$(this).parent().parent()
var tip=detele.find("td:first").text()
if(confirm(" Whether or not to delete "+tip+" Do you ?")){
detele.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><!-- Delete employee information -->\n" +
" </tr>")
tab.appendTo($("#employeeTable"))
tab.find("a").click(detelefun)
})
// Delete button binding event
$("a").click(detelefun)
})
</script>
</head>

  Delete employee data

 

<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 data 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"> Display the information of the added employee </button>
<!-- Show and hide employee information buttons -->
</div><br/>
<table id="panel" >
<div id="d1" style="position: absolute;z-index: 2;left: 150px;top: 180px" hidden="hidden"> <!-- Employee information form -->
<font size="5" color="blue"><h4> Employee information </h4></font><!-- Determine 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 location -->
<tr>
<td> full 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> The manager </td>
<td><a href="#"> Delete </a> </td><!-- Delete employee information -->
</tr>
<tr>
<td> Zhang San </td>
<td> male </td>
<td align="center">13727893322</td>
<td> staff </td>
<td><a href="#"> Delete </a> </td>
</tr>
<tr>
<td> The small white </td>
<td> Woman </td>
<td align="center">13727123322</td>
<td> staff </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 profile -->
<tr>
<td> full name </td>
<td><input type="text" id="name" > </td>
<td><button id="b1"> eliminate </button> </td><!-- Empty text -->
</tr>
<tr>
<td> Gender </td>
<td><input type="text" id="sex" > </td>
<td><button id="b2"> eliminate </button> </td>
</tr>
<tr>
<td> Telephone </td>
<td><input type="text" id="phone" > </td>
<td><button id="b3"> eliminate </button> </td>
</tr>
<tr>
<td> position </td>
<td><input type="text" id="post" > </td>
<td><button id="b4"> eliminate </button> </td>
</tr>
<tr><td colspan="3" align="center"><button id="button3"> add to </button></td></tr>
</table>
</table>
</body>
</html>

  utilize jquery Medium toggle() To hide in the display , use if(is(“:hidden”)) To achieve : When information is hidden , The button displays information , When the message is displayed , Hidden information appears in the button text

 

 

copyright:author[01?],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130734415427.html