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
So verwenden Sie Linux-Befehle in IDEA
Im Vergleich zum Windows-System bietet das Linux-...
Kurze Analyse des MySQL B-Tree-Index
B-Baum-Index Verschiedene Speicher-Engines können...
Grafisches Tutorial zur Installation und Konfiguration der komprimierten Version von MySQL 5.7.25
In diesem Artikel wird die Installations- und Kon...
MySQL 8.0-Installationstutorial unter Linux
Dieser Artikel beschreibt Ihnen, wie Sie MySQL 8....
Mit einem Befehl können Sie die allgemeinen Parameter des Lesebefehls in der Shell verstehen
Wir wissen, dass es in der Shell zwei Möglichkeit...
Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder
Da wir Bilder hochladen möchten, müssen wir zunäc...
Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen
In einem Artikel vor langer Zeit habe ich über di...
Einführung in den HTML-Standard für chinesische Zeichenkodierung
In HTML müssen Sie die von der Webseite verwendet...
Detaillierte Erläuterung der Vue-Konfigurationsanforderung für mehrere Serverlösungen
1. Lösung 1.1 Beschreibung des Schnittstellenkont...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 winx64
In diesem Artikel wird die Installations- und Kon...
12 nützliche Array-Tricks in JavaScript
Inhaltsverzeichnis Array-Deduplizierung 1. from()...
Einen Web-Rechner mit Javascript schreiben
Dieser Artikel beschreibt hauptsächlich die Auswi...
Ein gründliches Verständnis des JS-nativen Syntaxprototyps, des __proto__ und des Konstruktors
Inhaltsverzeichnis 1 Einleitung 2 Voraussetzungen...
So erhalten Sie Formulardaten in Vue
Inhaltsverzeichnis brauchen Daten abrufen und übe...
Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine
CentOS7 herunterladen Das Image, das ich herunter...