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
Lösung für den Fehler bei der MySQL-Remoteverbindung
Ich bin schon einmal auf das Problem gestoßen, da...
So verwenden Sie SHTML-Includes
Durch die Anwendung können einige öffentliche Bere...
Spezifische Verwendung der deaktivierten und schreibgeschützten Attribute von Textbereichen
Definition und Verwendung von „deaktiviert“ Das d...
WeChat-Applet implementiert Suchfeldfunktion
In diesem Artikelbeispiel wird der spezifische Co...
HTML-Optimierungstechniken, die Sie kennen müssen
Um die Leistung von Webseiten zu verbessern, begi...
Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung
1. Vertikaler Tisch und horizontaler Tisch Vertik...
So prüfen Sie, ob eine Tabelle in MySQL vorhanden ist, und löschen sie dann stapelweise
1. Ich habe lange im Internet gesucht, konnte abe...
Implementierung von TypeScript im React-Projekt
Inhaltsverzeichnis 1. Einleitung 2. Nutzung Zusta...
Beispiel für die Verwendung von mycat zur Implementierung der Lese-/Schreibtrennung in MySQL-Datenbanken
Was ist MyCAT Ein vollständig Open Source-Großdat...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL
Inhaltsverzeichnis Zum Beispiel: Allgemeines Schr...
So verwenden Sie Elemente in React-Projekten
Dies ist mein erstes Mal, dass ich das Element-Fr...
MySQL lernen: Drei Paradigmen für Anfänger
Inhaltsverzeichnis 1. Paradigmenfundament 1.1 Der...
JS tiefe und flache Kopierdetails
Inhaltsverzeichnis 1. Was bedeutet „Shallow Copy“...
Probleme und Lösungen beim Bereitstellen eines Projekts beim Upgrade der Mysql-Datenbank von Version 5.6.28 auf Version 8.0.11
Die Probleme und Lösungen, die beim Bereitstellen...