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
Sechs mit CSS3 implementierte Randübergangseffekte
Sechs EffekteImplementierungscode html <h1>...
So überprüfen Sie die Festplattennutzung unter Linux
1. Verwenden Sie den Befehl df, um die gesamte Fe...
Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate
(I) Installation von mysql5.7: ❀ Details: Die Ins...
Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL
1. Hintergrund In tatsächlichen Projekten stoßen ...
Detaillierte Erklärung der Homologie und der Domänenübergreifendkeit, die für Front-End-Interviews erforderlich sind
Vorwort Wie wir alle wissen, treten bei Front-End...
Serviceverwaltung der Quellpaketinstallation unter Linux
Inhaltsverzeichnis 1. Startverwaltung des Quellpa...
Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website
1. Ersetzen Sie die Adresse Ihrer .js-Bibliotheks...
Spezifische Verwendung von Nginx Keepalive
Der Standardanforderungsheader des http1.1-Protok...
So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update
Vor Kurzem hat das Unternehmen damit begonnen, al...
Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
Das CSS-Positionsattribut gibt den Positionierung...
Ist ein Design, das den Designspezifikationen entspricht, ein gutes Design?
In den letzten Jahren meiner Karriere habe ich an...
MySQL-Datenoperation – Verwendung von DML-Anweisungen
veranschaulichen DML (Data Manipulation Language)...
So passen Sie Docker-Images mit Dockerfile an
Anpassen von Bildern mit Dockerfile Unter Bildanp...
Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen
Inhaltsverzeichnis Grundtypen jeder Typ Arrays Tu...
Ein tiefer Einblick in die MySQL InnoDB-Speicher-Engine
Vorwort InnoDB gehört in MySQL zur Speicher-Engin...