Hinzufügen und Löschen von Tabelleninformationen mit Javascript
Erste Schritte mit JavaScriptJavaScript ist eine leichtgewichtige, interpretierte Webentwicklungssprache. Das Sprachsystem ist nicht sehr kompliziert und einfach und leicht zu erlernen. Da alle modernen Browser über eingebettete JavaScript-Engines verfügen, kann JavaScript-Quellcode direkt im Browser interpretiert und ausgeführt werden, und Benutzer müssen sich keine Gedanken über Supportprobleme machen. Dies ist eine kleine Übung, um mit js zu beginnen. Hinzufügen und Löschen von TabelleninformationenEinfache DOM-Operationen können mit HTML-Tags erreicht werden. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<style type="text/css">
*{
Rand: 0;
Polsterung: 0;
}
</Stil>
<Skripttyp="text/javascript">
Funktion delA(){
//Klicken Sie auf den Hyperlink, um diese Zeile zu löschen. //Verwenden Sie dies, um das übergeordnete Element zu löschen. var tr = this.parentNode.parentNode;
//Name der zu löschenden Person abrufen var name=tr.getElementsByTagName("td")[0].innerHTML;
//Benutzer nachfragen, ob gelöscht werden soll var flag=confirm("Möchten Sie "+name+" löschen?");
wenn(Flagge){
tr.parentNode.removeChild(tr);
}
//Verhindert das Standardverhalten des Browsers, z. B. das Öffnen einer neuen Registerkarte. return false;
}
fenster.onload = funktion(){
//Klicken Sie auf den Hyperlink, um die Informationen eines Mitarbeiters zu löschen. //Link abrufen. var allA=document.getElementsByTagName("a");
//Bind-Antwortfunktion für (var i=0;i<allA.length;i++){
alleA[i].onclick=delA;
}
//Mitarbeiterfunktion hinzufügen, klicken Sie auf die Schaltfläche, um der Tabelle Informationen hinzuzufügen var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick=Funktion(){
//Textinhalt im Eingabefeld abrufen var empName=document.getElementById("empName").value;
var E-Mail = document.getElementById("E-Mail").Wert;
var Gehalt=document.getElementById("Gehalt").Wert;
//Erstelle einen tr
var tr = document.createElement("tr");
//Inhalt zu tr hinzufügen tr.innerHTML="<td>"+empName+"</td>"+
"<td>"+E-Mail+"</td>"+
"<td>"+Gehalt+"</td>"+
"<td><a href='javascript:;'>Löschen</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick=delA;
//tr in Tabelle einfügen var employeeTable=document.getElementById("employeeTable");
//Tbody abrufen
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
}
</Skript>
</Kopf>
<Text>
<Tabellen-ID="Mitarbeitertabelle">
<tr>
<th>Name</th>
<th>E-Mail</th>
<th>Gehalt</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="">Löschen</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="">Löschen</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="">Löschen</a></td>
</tr>
<div id="formDiv">
<h4>Neue Mitarbeiter hinzufügen</h4>
<Tabelle>
<tr>
<td class="word">Name: </td>
<td Klasse="inp">
<Eingabetyp="Text" Name="EmpName" ID="EmpName">
</td>
</tr>
<tr>
<td class="word">E-Mail: </td>
<td Klasse="inp">
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td class="word">Gehalt: </td>
<td Klasse="inp">
<input type="text" name="Gehalt" id="Gehalt">
</td>
</tr>
<tr>
<td colspan="2" align="center"> <!--Die Attribute colspan und rowspan geben die Anzahl der Zeilen und Spalten an, die eine Zelle umfassen kann-->
<!--align-Attribut ist die Textausrichtungsposition-->
<button id="addEmpButton" value="abc">
Einreichen
</button>
</td>
</tr>
</Tabelle>
</div>
</Tabelle>
</body>
</html> Die Kommentare in den Code-Snippets sind sehr übersichtlich und zum Üben geeignet. 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:
|
<<: Docker-Installationstutorial: Erste Schritte (Anfängerausgabe)
Artikel empfehlen
Implementierung der MySQL-Datentypkonvertierung
1. Problem Es gibt eine Tabelle wie unten gezeigt...
SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)
[LeetCode] 183.Kunden, die nie bestellen Angenomm...
Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs
Der Befehl „Bash History“ im Linux-System hilft d...
Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)
Kürzlich stieß ich während des Entwicklungsprozes...
JavaScript zum Erreichen eines einfachen Message Board-Falls
Verwenden Sie Javascript, um ein Message Board-Be...
js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch
In diesem Artikel wird der spezifische Code von j...
Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker
Inhaltsverzeichnis Vorne geschrieben 1. Ngixn-Bil...
Fassen Sie die häufig verwendeten n-ten-Kind-Selektoren zusammen
Vorwort In der Front-End-Programmierung verwenden...
nginx+tomcat-Beispiel für den Zugriff auf das Projekt über den Domänennamen
Ich wollte wissen, wie ich mit einem Domänennamen...
Lösung für viele Zeilenumbrüche und Wagenrückläufe in MySQL-Daten
Inhaltsverzeichnis Finden Sie das Problem 1. So e...
Detaillierte Erklärung von Softlinks und Hardlinks in Linux
Inhaltsverzeichnis 1. Grundlegende Speicherung vo...
Detaillierte Erläuterung der Installation und Konfiguration des Nginx+Tomcat-Load-Balancing-Clusters
Inhaltsverzeichnis Vorwort 1. Nginx + Tomcat 2. K...
Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS
inline-flex ist dasselbe wie inline-block. Es ist...
Erläuterung der Konfiguration und Verwendung der MySQL-Speicher-Engine InnoDB
MyISAM und InnoDB sind die gängigsten Speicher-En...
Detaillierte Erklärung der Whitelist-Regeln von nginx-naxsi
Syntax der Whitelist-Regel: Grundregel wl:ID [neg...