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
Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen
Zweck: Verschachtelte Verwendung von MySQL-Aggreg...
CSS3-Animation zum Erzielen des Streamer-Button-Effekts
Beim Erlernen von CSS3 habe ich festgestellt, das...
Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware
Quelle des Problems Wie wir alle wissen, erzeugt ...
Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren
Mit dem Nginx-Modul ngx_http_image_filter_module ...
Analyse der Verwendung von MySQL-Abfragesortierung und Abfrageaggregationsfunktionen
In diesem Artikel wird die Verwendung von MySQL-A...
jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation
Ich habe eine Navigationsleiste mit einem erweite...
Schritte der MySQL-Methode zum Bestimmen, ob es sich um eine Teilmenge handelt
Inhaltsverzeichnis 1. Problem 2. Lösung Option 1:...
So zeichnen Sie eine Mindmap in einem Miniprogramm
Inhaltsverzeichnis Was ist eine Mindmap? Wie zeic...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
Analyse der Probleme und Lösungen für wiederholte Übermittlung, wiederholte Aktualisierung und Backoff-Verhinderung
eins. Vorwort <br />Sie werden diese Art von...
So implementieren Sie mehrere Parameter in el-dropdown in ElementUI
Aufgrund der zunehmenden Anzahl von Schaltflächen...
CentOS 8 ist jetzt verfügbar
CentOS 8 ist jetzt verfügbar! Die Versionen von C...
So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot
Inhaltsverzeichnis 1. Installation von JDK1.8 unt...
Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
Das CSS-Positionsattribut gibt den Positionierung...
Verwendung der MySQL SHOW STATUS-Anweisung
Um die Leistung von MySQL anzupassen und den Dien...