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
Detaillierte Erläuterung des Implementierungsprinzips der Transaktionsisolationsstufe in MySQL
Vorwort Wenn es um Datenbanktransaktionen geht, f...
So aktivieren Sie das Root-Konto in Ubuntu 20.04
Nach der Installation von Ubuntu 20.04 gibt es st...
Nginx tp3.2.3 404 Problemlösung
Vor Kurzem habe ich Apache auf nginx umgestellt. ...
Detaillierte Erläuterung der Funktionen und Methoden des Vue3-Lebenszyklus
1. Übersicht Bei der sogenannten Lifecycle-Funkti...
Detaillierte Erläuterung des Ausführungsprozesses der JavaScript-Engine V8
Inhaltsverzeichnis 1. V8-Quelle 2. V8-Serviceziel...
Beispiele für die Verwendung des Li-Tags in HTML
Ich möchte den Titel links und das Datum rechts a...
Lösung zur Installation von OpenCV 3.2.0 in Ubuntu 18.04
Laden Sie opencv.zip herunter Installieren Sie di...
Implementierung der ELK-Bereitstellungsmethode mit einem Klick in Docker Compose
Installieren Filebeat hat Logstash-Forwarder voll...
Implementierungscode der CSS-Formularvalidierungsfunktion
Rendern Prinzip Im Formularelement gibt es ein Mu...
Mysql8.0 verwendet Fensterfunktionen, um Sortierprobleme zu lösen
Einführung in MySQL-Fensterfunktionen MySQL unter...
Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität
Bei täglichen Betriebs- und Wartungsarbeiten werd...
Einführung in HTML-Link-Ankertags und ihre Rolle bei der Suchmaschinenoptimierung
Das <a>-Tag wird hauptsächlich verwendet, u...
Detaillierte Analyse der Syntax von Mysql-Updates zum Ändern mehrerer Felder und
Beim Aktualisieren eines Datensatzes in MySQL ist...
Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs
Die Zeit vergeht wie im Flug und in nur sechs Tag...
So betten Sie mithilfe von Iframe andere Webseiten in eine Webseite ein
So verwenden Sie Iframe: Code kopieren Der Code l...