jQuery implementiert die Funktion zum Hinzufügen und Löschen von Mitarbeiterinformationen
|
In diesem Artikel wird der spezifische Code von jQuery zur Implementierung der Funktionen zum Hinzufügen und Löschen von Mitarbeiterinformationen zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Die Mitarbeitertabelle wird mithilfe von jQuery-Ereignissen hinzugefügt
Haupttastenbindungsereignis
<!DOCTYPE html>
<html lang="cn">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script type="text/javascript" src="./Demo/script/jquery-1.7.2.js"></script>
<Skripttyp="text/javascript">
$(Funktion (){
//Mitarbeiterinformationen-Schaltfläche anzeigen und ausblenden Button1-Bindungsereignis $("#button1").click(function (){
$("#d1").umschalten()
$("#employeeTable").toggle()
wenn($("#d1").ist(":versteckt")){
$("#button1").text("Mitarbeiterinformationen anzeigen")
}anders{
$("#button1").text("Mitarbeiterinformationen ausblenden")
}
})
//Mitarbeiterinformationen-Schaltfläche anzeigen und ausblenden Button2-Bindungsereignis $("#button2").click(function (){
$("#f1").umschalten()
$("#formDiv").toggle()
//Schaltflächenwort ändernif($("#f1").is(":hidden")){
$("#button2").text("Hinzugefügte Mitarbeiterinformationen anzeigen")
}anders{
$("#button2").text("Mitarbeiterinformationen ausblenden")
}
})
//Schaltflächenbindungstext löschen - Ereignis löschen $("#b1").click(function(){
$("#name").val("")
})
$("#b2").klick(function(){
$("#sex").val("")
})
$("#b3").klick(function(){
$("#Telefon").val("")
})
$("#b4").klick(function(){
$("#post").val("")
})
//Mitarbeiterinformationen löschen Funktion wiederverwenden Erstellung var detelefun = function () {
var löschen = $(this).parent().parent()
var tip = detele.find("td:first").text()
if(confirm("Möchten Sie "+tip+" löschen?")){
löschen.entfernen()
}
return false
}
//Schaltflächenbindung hinzufügen Ereignis hinzufügen $("#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=\"#\">Löschen</a> </td><!--Löschen von Mitarbeiterinformationen-->\n" +
" </tr>")
tab.appendTo($("#employeeTable"))
tab.find("a").click(detelefun)
})
//Bindungsereignis der Schaltfläche „Löschen“ $("a").click(detelefun)
})
</Skript>
</Kopf>Löschung von Mitarbeiterdaten
<Text>
<div style="position: relativ">
<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">Willkommen beim Mitarbeiterinformationsmanagement</div></font>
<!--Titel-->
<button id="button1" style="color: #0050D0; position: absolute;z-index: 6;left: 150px;top: 150px;">Mitarbeiterinformationen anzeigen</button>
<button id="button2" style="color: #0050D0;position: absolute;z-index: 6;left: 900px;top: 150px">Hinzugefügte Mitarbeiterinformationen anzeigen</button>
<!--Schaltfläche „Mitarbeiterinformationen anzeigen und ausblenden“-->
</div><br/>
<Tabellen-ID="Panel" >
<div id="d1" style="position: absolute;z-index: 2;left: 150px;top: 180px" hidden="hidden"> <!--Mitarbeiterinformationstabelle-->
<font size="5" color="blue"><h4>Mitarbeiterinformationen</h4></font><!--Schriftgröße bestimmen-->
<table hidden="hidden" id="employeeTable" border="1" cellspacing="0" style="Hintergrund: kornblumenblau;Position: absolute;z-index: 2;links: 10px;oben: 250px" width="400" >
<!--Tabellenposition festlegen-->
<tr>
<td>Name</td>
<td>Geschlecht</td>
<td align="center">Telefon</td>
<td>Position</td>
<td></td>
</tr>
<tr>
<td>Xiao Ming</td>
<td>Männlich</td>
<td align="center">13623233322</td>
<td>Manager</td>
<td><a href="#" >Löschen</a> </td><!--Löschung von Mitarbeiterinformationen-->
</tr>
<tr>
<td>Zhang San</td>
<td>Männlich</td>
<td align="center">13727893322</td>
<td>Mitarbeiter</td>
<td><a href="#" >Löschen</a> </td>
</tr>
<tr>
<td>Xiaobai</td>
<td>Weiblich</td>
<td align="center">13727123322</td>
<td>Mitarbeiter</td>
<td><a href="#" >Löschen</a> </td>
</tr>
</Tabelle>
</div>
<font id="f1" hidden="hidden" size="5" style=" color: blue;position: absolute;z-index: 2;left: 900px;top: 180px"><h4>Mitarbeiterinformationen hinzufügen</h4></font>
<table id="formDiv" hidden="hidden" border="1" cellspacing="0" style="Hintergrund: Kornblumenblau;Position: absolute;Z-Index: 2;links: 820px;oben: 250px" width="300 ">
<!--Mitarbeiterinformationen hinzufügen-->
<tr>
<td>Name</td>
<td><Eingabetyp="Text" id="Name" > </td>
<td><button id="b1">Löschen</button> </td><!--Text löschen-->
</tr>
<tr>
<td>Geschlecht</td>
<td><input Typ="Text" id="Geschlecht" > </td>
<td><button id="b2">Löschen</button> </td>
</tr>
<tr>
<td>Telefon</td>
<td><input type="text" id="telefon" > </td>
<td><button id="b3">Löschen</button> </td>
</tr>
<tr>
<td>Position</td>
<td><Eingabetyp="Text" id="Beitrag" > </td>
<td><button id="b4">Löschen</button> </td>
</tr>
<tr><td colspan="3" align="center"><button id="button3">Hinzufügen</button></td></tr>
</Tabelle>
</Tabelle>
</body>
</html>Verwenden Sie toggle() in jQuery zum Ausblenden und Anzeigen und verwenden Sie if(is(":hidden")), um Folgendes zu erreichen: Wenn die Informationen ausgeblendet sind, zeigt die Schaltfläche die Anzeigeinformationen an, und wenn die Informationen angezeigt werden, zeigt der Schaltflächentext ausgeblendete Informationen an.
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So schreiben Sie ein MySQL-Sicherungsskript
>>: So importieren Sie schnell Daten in MySQL
Artikel empfehlen
So verwenden Sie Nginx, um die Koexistenz mehrerer Container auf dem Server zu realisieren
Hintergrund Es gibt einen Tencent Linux Cloud-Hos...
Beispiel zum Entfernen eines JSON-Backslashs in PHP
1. Entfernen Sie Backslashes mit der Methode „str...
So legen Sie die Parameter für die Post-Request-Druckeranforderung für Nginx-Protokolle fest
【Vorwort】 Die SMS-Funktion unseres Projekts beste...
Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern
In diesem Artikel wird der spezifische Implementi...
Dieser Artikel hilft Ihnen beim Einstieg und beim Verständnis der grundlegenden Vorgänge von JQuery
Inhaltsverzeichnis 1. Schritte zur Verwendung von...
JavaScript-Timer zum nahtlosen Scrollen von Bildern
In diesem Artikel wird der spezifische JavaScript...
Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat
1. Warum maxPostSize festlegen? Der Tomcat-Contai...
Zusammenfassung der JavaScript-Timertypen
Inhaltsverzeichnis 1.setInterval() 2.setTimeout()...
Detaillierte Erklärung der Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue
{ {}} Holen Sie sich den Wert, der ursprüngliche ...
Entwerfen Sie einen Datensammler mit Vue
Inhaltsverzeichnis Szenario Kernthemen Statusüber...
MySQL 8.0.26-Installation und vereinfachtes Tutorial (das umfassendste im Internet)
Inhaltsverzeichnis 1. MySQL herunterladen 1.1 Her...
Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?
Viele Organisationen müssen Dateiserver sichern u...
So verwenden Sie den Linux-Paste-Befehl
01. Befehlsübersicht Der Einfügebefehl fügt die e...
Auszeichnungssprache - Stylesheets drucken
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)
Überblick über die Alibaba Cloud Security Group F...