js implementiert dynamisch Operationen zum Hinzufügen und Löschen von Tabellen
|
In diesem Artikelbeispiel wird der spezifische Code zum dynamischen Hinzufügen und Löschen von Tabellen in js zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Der laufende Effekt ist in der Abbildung dargestellt (zwei Implementierungsschemata, das kommentierte ist das erste Implementierungsschema).
Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
</Kopf>
<style type="text/css">
div{
Textausrichtung: zentriert;
Box-Größe: Rahmenbox;
Breite: 100 %;
}
#div1{
Rand links: 300px;
Breite: 800px;
Rand oben: 50px;
}
#div2{
Rand links: 300px;
Breite: 800px;
Polsterung oben: 50px;
}
#Tabellen-ID{
Breite: 580px;
}
</Stil>
<Text>
<div id="div0">
<div id="div1">
<input type="text" id="userid" placeholder="Bitte geben Sie Ihre ID ein" />
<input type="text" id="username" placeholder="Bitte geben Sie Ihren Namen ein" />
<input type="text" id="gender" placeholder="Bitte geben Sie Ihr Geschlecht ein" />
<input type="button" value="Hinzufügen" id="add"/>
</div>
<div id="div2">
<table border="1px" align="center" id="table_id">
<caption style="font: '微软雅黑';font-size:20px;">Studenteninformationsformular</caption>
<tr>
<th>Nummer</th>
<th>Name</th>
<th>Geschlecht</th>
<th>Betrieb</th>
</tr>
<tr>
<td>1</td>
<td>Linghu Chong</td>
<td>Zhang Wuji</td>
<td><input type="button" value="Löschen" style="color: blue;" onclick="delTr(this)"/></td>
</tr>
<tr>
<td>1</td>
<td>Linghu Chong</td>
<td>Zhang Wuji</td>
<td><input type="button" value="Löschen" style="color: blue;" onclick="delTr(this)" /></td>
</tr>
<tr>
<td>1</td>
<td>Linghu Chong</td>
<td>Zhang Wuji</td>
<td><input type="button" value="Löschen" style="color: blue;" onclick="delTr(this)"/></td>
</tr>
</Tabelle>
</div>
</div>
</body>
<Skripttyp="text/javascript">
// Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird die folgende Methode ausgelöst: document.getElementById("add").onclick=function(){
// Inhalt jedes Textfelds abrufen var id = document.getElementById("userid").value;
var name = document.getElementById("Benutzername").value;
var Geschlecht = document.getElementById("Geschlecht").Wert;
/* // ID hinzufügen
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
// Benutzernamen hinzufügen
var td_username = document.createElement("td");
var text_username = document.createTextNode(name);
td_username.appendChild(text_benutzername);
// Geschlecht hinzufügen
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
// Schaltfläche hinzufügen var td_button = document.createElement("td");
var ele_input = document.createElement("Eingabe");
ele_input.setAttribute("Typ","Schaltfläche");
ele_input.setAttribute("Wert","löschen");
ele_input.setAttribute("beim Klicken","delTr(dieses)");
ele_input.style.color="blau";
td_button.appendChild(ele_input);
var ele_tr = document.createElement("tr");
ele_tr.appendChild(td_id);
ele_tr.appendChild(td_Benutzername);
ele_tr.appendChild(td_gender);
ele_tr.appendChild(td_button);
var ele_table = document.getElementsByTagName("Tabelle")[0];
ele_table.appendChild(ele_tr);*/
// Verwenden Sie die Methode innerHtml, um dynamisch eine Tabelle hinzuzufügen. var tab = document.getElementsByTagName("table")[0];
tab.innerHTML+="<tr>\n"+
"<td>"+id+"</td>\n"+
"<td>"+Name+"</td>"+
"<td>"+Geschlecht+"</td>"+
"<td><input type='button' value='Löschen' onclick='delTr(this)' style='color:blue'/></td>"+
"</tr>"
}
Funktion delTr(Objekt){
var Tabelle = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
Tabelle.entfernenKind(tr);
}
</Skript>
</html>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:
|
<<: Analyse der Implementierung der MySQL-Anweisungssperre
>>: Erläuterung des Prozesses des Docker-Packaging-Node-Projekts
Artikel empfehlen
Lösung für falsche Zeichenfolgenwerte in MySQL
Viele Freunde berichten von folgendem Fehler, wen...
Detaillierte Erklärung der MySQL-Berechtigungen und -Indizes
MySQL-Berechtigungen und Indizes Der höchste Benu...
Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks
Im Linux-System gibt es einen Dateityp namens Lin...
Anweisungen zum Bereitstellen von Projekten auf Remotecomputern mithilfe des Publish Over SSH-Plugins in Jenkins
Verwendung des Plugins „Veröffentlichen über SSH“...
Detaillierte Erklärung von Prototypen und Prototypenketten in JavaScript
Inhaltsverzeichnis Prototyp-Kettendiagramm Grundl...
So installieren Sie MySQL Community Server 5.6.39
Dieser Artikel enthält das ausführliche Tutorial ...
Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung
1. Vertikaler Tisch und horizontaler Tisch Vertik...
Detaillierte Erklärung verschiedener horizontaler und vertikaler Zentrierungsmethoden in HTML (Grundlagen)
Vorwort Als wir das Pferd geschrieben haben, wuss...
Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung
1. Aktivieren Sie den Remotezugriff auf den Docke...
Detaillierte Erklärung der CocosCreator MVC-Architektur
Überblick Dieser Artikel stellt die in Spieleclie...
Eine kurze Analyse der grundlegenden Implementierung von Vue-Erkennungsdatenänderungen
Inhaltsverzeichnis 1. Objektänderungserkennung 2....
Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen
<br /> Wenn wir bestimmte Websites durchsuch...
Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung
Dieser Artikel beschreibt die Support- und Proble...
Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten
Im vorherigen Artikel haben wir erklärt, wie ngin...
Das Prinzip und die Konfiguration des Nginx-Lastausgleichs sowie der dynamischen und statischen Trennung
Inhaltsverzeichnis 1. Nginx implementiert das Las...