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
Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Tabelle ...
Ein Artikel zum Erlernen von CSS3-Bildrändern
Mit der CSS3-Eigenschaft „border-image“ können Si...
7 Interviewfragen zu JS, wie viele können Sie richtig beantworten
Vorwort In JavaScript ist dies der Kontext zum Au...
So installieren Sie den RabbitMQ-Server mit Yum auf CentOS
Socat muss vor der Installation von rabbitmq inst...
Detailliertes Tutorial zur Installation von MySQL unter Linux
MySQL-Downloads für alle Plattformen sind unter M...
Eine kurze Erläuterung der MySQL-Benutzerberechtigungstabelle
MySQL erstellt bei der Installation automatisch e...
Detaillierte Erläuterung der Vuex-Persistenz in der praktischen Anwendung von Vue
Inhaltsverzeichnis Vuex-Persistenz Zusammenfassen...
Sechs Vererbungsmethoden in JS und ihre Vor- und Nachteile
Inhaltsverzeichnis Vorwort Vererbung von Prototyp...
Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden
Wir befinden uns in einer Ära der rasanten Entwick...
So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)
Vorwort Kürzlich mit mysql /usr/local/mysql/bin/m...
Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME
Verwenden Sie die FRAME-Eigenschaft, um den Stilt...
Shell-Skript Nginx-Automatisierungsskript
Dieses Skript kann die Vorgänge zum Starten, Stop...
Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
So installieren Sie MySQL und aktivieren die Remote-Verbindung auf dem Cloud-Server Ubuntu_Server_16.04.1
1. Installieren Sie MySQL: Verwenden Sie die folg...
13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen
Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...