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
Ubuntu MySQL-Version auf 5.7 aktualisiert
Vor einigen Tagen teilte die Bibliothek mit, dass...
Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung
Was ist der Grund für den Fehler Last_IO_Errno:12...
MySql-Anmeldekennwort vergessen und Lösung für vergessenes Kennwort
Methode 1: MySQL bietet einen Befehlszeilenparame...
jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
Gewünschte Wirkung: Nach dem Klick auf die Übermi...
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)
In diesem Artikel wird der spezifische JavaScript...
Beispielcode für die Verwendung von js zur Implementierung gleichzeitiger Ajax-Anfragen, um die Anzahl der Anfragen zu begrenzen
Problembeschreibung: Wenn die Anzahl der asynchro...
React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists
Inhaltsverzeichnis Nehmen Sie Todolist als Beispi...
Erfahrungsaustausch zur MySQL-Slave-Wartung
Vorwort: Die MySQL-Master-Slave-Architektur dürft...
js zur Realisierung eines einfachen Werbefensters
In diesem Artikel wird der spezifische Code von j...
Nach dem Neustart des Baota-Panels wird die Meldung -ModuleNotFoundError: Kein Modul mit dem Namen „geventwebsocket“ angezeigt.
Hintergrund: Da der Server das Flask-Projekt bere...
HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten
1. Anwendung von Multimedia in HTML_Flash-Animati...
So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)
1. Prinzip des Hotlinking 1.1 Vorbereitung der We...
JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen
In diesem Artikel wird der spezifische JavaScript...
Datenabfragevorgang im MySQL-JSON-Format
Der Standardtabellenname ist „base_data“ und der ...
Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis
Wie können Sie das Lamaging von Routen vergessen,...