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
Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung
Inhaltsverzeichnis $nächsterTick() $forceUpdate()...
Lassen Sie uns ausführlich darüber sprechen, ob setState in React eine Makro- oder eine Mikroaufgabe ist
Inhaltsverzeichnis Vorwort Stellt der Interviewer...
Bringen Sie Ihnen Schritt für Schritt das Tutorial zur MySQL-Abfrageoptimierungsanalyse bei
Vorwort MySQL ist eine relationale Datenbank mit ...
Die Elementbaumsteuerung integriert ein Dropdown-Menü mit Symbolen (Baum+Dropdown+Eingabe)
Inhaltsverzeichnis Anforderungen: Implementierung...
WeChat-Miniprogramm zur Implementierung elektronischer Signaturen
In diesem Artikel finden Sie den spezifischen Cod...
36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)
Vorwort Diese Prinzipien sind aus tatsächlichen K...
Entdecken Sie die Wahrheit hinter dem Neuladevorgang in Nginx
Der heutige Artikel stellt hauptsächlich den Neul...
Schritte zum Bereitstellen von Hyper-V zur Desktop-Virtualisierung (grafisches Tutorial)
Für die Bereitstellung von Hyper-V gelten die fol...
js, um einen Boden-Scrolling-Effekt zu erzielen
In diesem Artikel wird jQuery verwendet, um den E...
js verwendet Cookies, um die Seitenvorgänge des Benutzers zu speichern
Vorwort Während des Entwicklungsprozesses stoßen ...
Detaillierter Prozess zur Installation von Presto und zum Verbinden von Hive in Docker
1. Einleitung Presto ist eine Open-Source-SQL-Abf...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML
Der Unterschied zwischen relativ und absolut in H...
Heute werde ich einige seltene, aber nützliche JS-Techniken teilen
1. Zurück-Button Verwenden Sie history.back(), um...
So erstellen Sie eine Testdatenbank mit zig Millionen Testdaten in MySQL
Manchmal müssen Sie basierend auf der offiziell v...
Detaillierte Erklärung zum Importieren/Exportieren von MySQL-Daten im Docker-Container
Vorwort Wir alle wissen, dass der Import und Expo...