Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript
VorwortHier sehen Sie, wie eine Tabelle dynamisch hinzugefügt wird. Wenn Sie auf die Schaltfläche „Hinzufügen“ klicken, wird möglicherweise ein Formular angezeigt, das den eingegebenen Inhalt zur Tabelle hinzufügt. Alternativ können Sie auch die gesamte Zeile in der Tabelle löschen. UmsetzungsideenErstellen Sie zunächst eine Tabelle und ein Formular und fügen Sie den im Formular eingetragenen Inhalt dynamisch der Tabelle hinzu. In der oberen rechten Ecke der Formularseite befindet sich ein Schließen-Button. Durch Anklicken kann die Formularseite geschlossen und die Tabellenseite angezeigt werden. Um die Seite schön zu gestalten, habe ich die Schaltfläche zum Hinzufügen von Daten in <tfoot></tfoot> der Tabelle eingefügt und die dynamisch generierten Tabellendaten zu <tbody><tbody> hinzugefügt. Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird die Tabelle ausgeblendet und das Formular angezeigt. Die hinzuzufügenden Informationen werden in das Formular eingetragen und dann werden die Eingabeinformationen abgerufen. Über jQuery wird eine Zeile mit Elementen in der Tabelle generiert und die abgerufenen Werte werden hinzugefügt. Schließlich wird diese Zeile der letzten Zeile von <tbody><tbody> hinzugefügt. Wenn auf der Formularseite auf die Schaltfläche „Hinzufügen“ geklickt wird, wird das Formular ausgeblendet und die geänderten Änderungen werden angezeigt. Da auch die dynamische Löschfunktion erforderlich ist, muss jedem Zeilenelement in der Tabelle ein Löschattribut (Hyperlink) hinzugefügt werden. Wenn wir auf „Löschen“ klicken, erhalten wir die entsprechende Zeile und führen den Löschvorgang aus. Implementierungscode
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
Tisch {
Breite: 410px;
Rand: 100px auto 0;
Textausrichtung: zentriert;
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
Rand: 1px durchgezogen #ccc;
}
Mai,
td {
Breite: 150px;
Höhe: 40px;
Rand: 1px durchgezogen #ccc;
Polsterung: 10px;
}
A{
Textdekoration: keine;
}
.btnHinzufügen {
Breite: 110px;
Höhe: 30px;
Schriftgröße: 20px;
}
.Artikel {
Position: relativ;
Polsterung links: 100px;
Polsterung rechts: 20px;
Rand unten: 34px;
}
.lb {
Position: absolut;
links: 0;
oben: 0;
Anzeige: Block;
Breite: 100px;
Textausrichtung: rechts;
}
.txt {
Breite: 300px;
Höhe: 32px;
}
.form-add {
Position: absolut;
oben: 100px;
links: 578px;
Rand: 1px durchgezogen #ccc;
Rand links: -197px;
Polsterung unten: 20px;
Anzeige: keine;
}
.Titel {
Hintergrundfarbe: #f7f7f7;
Rahmenbreite: 1px 1px 0 1px;
Rahmen unten: 0;
Rand unten: 15px;
Position: relativ;
}
Spanne {
Breite: automatisch;
Höhe: 18px;
Schriftgröße: 16px;
Farbe: rgb(102, 102, 102);
Texteinzug: 12px;
Polsterung: 8px 0px 10px;
Rand rechts: 10px;
Anzeige: Block;
Überlauf: versteckt;
Textausrichtung: links;
}
.title div {
Breite: 16px;
Höhe: 20px;
Position: absolut;
rechts: 10px;
oben: 6px;
Schriftgröße: 30px;
Zeilenhöhe: 16px;
Cursor: Zeiger;
}
.einreichen {
Textausrichtung: zentriert;
}
.Eingabe übermitteln {
Breite: 170px;
Höhe: 32px;
}
</Stil>
</Kopf>
<Text>
<!--Schaltflächen und Formulare-->
<Tabelle>
<Kopf>
<tr>
<th>Klasse</th>
<th>Name</th>
<th>Matrikelnummer</th>
<th>Betrieb</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>Klasse 1</td>
<td>Xiao Wang</td>
<td>001</td>
<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Löschen</a></td>
</tr>
<tr>
<td>Klasse 2</td>
<td>Kleiner Bär</td>
<td>002</td>
<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Löschen</a></td>
</tr>
</tbody>
<tfuß>
<tr>
<td id="j_btnAddData" class="btnAdd" colspan="4">Daten hinzufügen</td>
</tr>
</tfoot>
</Tabelle>
<!--Formular zum Hinzufügen von Daten-->
<div id="j_formAdd" class="form-add">
<div Klasse="Titel">
<span>Daten hinzufügen</span>
<div id="j_hideFormAdd">×</div>
</div>
<div Klasse="Artikel">
<label class="lb" für="">Klasse:</label>
<input class="txt" type="text" id="classes" placeholder="Bitte geben Sie die Klasse ein">
</div>
<div Klasse="Artikel">
<label class="lb" für="">Name:</label>
<input class="txt" type="text" id="uname" placeholder="Bitte geben Sie Ihren Namen ein">
</div>
<div Klasse="Artikel">
<label class="lb" for="">Studentenausweis:</label>
<input class="txt" type="text" id="order" placeholder="Bitte geben Sie Ihre Matrikelnummer ein">
</div>
<div Klasse="Senden">
<input type="button" value="Hinzufügen" id="j_btnAdd">
</div>
</div>
</body>
</html>
<script src="jquery.js"></script>
<Skript>
$(Funktion () {
$('#j_btnAddData').klick(Funktion () {
$('#j_formAdd').show();
$('Tabelle').ausblenden()
});
$('#j_hideFormAdd').click(function () {
$('#j_formAdd').hide();
$('Tabelle').zeigen()
});
$('#j_btnAdd').klick(Funktion () {
$('Tabelle').zeigen()
$('#j_formAdd').hide();
var Klassen = $('#Klassen').val();
var uname = $('#uname').val();
var Reihenfolge = $('#Reihenfolge').val();
var Neu =$('<tr>' +
'<td>'+Klassen+'</td>'+
'<td>'+Name+'</td>' +
'<td>'+Bestellung+'</td>' +
'<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Löschen</a></td>' +
'</tr>' );
$('#j_tb').append(Neu);
});
$('#j_tb').on('klicken','.get', Funktion () {
$(dies).parent().parent().entfernen();
});
});
</Skript> Ergebnisse erzielen
Dies ist das Ende dieses Artikels mit der detaillierten Erklärung zum dynamischen Generieren von Tabellen mit JavaScript. Weitere relevante Inhalte zum dynamischen Generieren von Tabellen mit JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)
>>: Spezifische Verwendung zusammengesetzter CSS-Selektoren
Artikel empfehlen
Zwei Abfragemethoden, wenn der MySQL-Abfragefeldtyp JSON ist
Die Tabellenstruktur ist wie folgt: Ich würde var...
Lösung für FileZilla 425. Verbindung zum FTP (Alibaba Cloud Server) nicht möglich.
Alibaba Cloud Server kann keine Verbindung zum FT...
Beispiel zum Aktivieren des Brotli-Komprimierungsalgorithmus für Nginx
Brotli ist ein neues Datenformat, das eine um 20 ...
Lernen Sie, wie Sie in 2 Minuten ein kreisförmiges/fächerförmiges Menü erstellen (Basisversion)
Vorwort Für das Projekt ist ein kreisförmiges Men...
Analyse des Prozesses zum Bereitstellen reiner HTML-Dateien in Tomcat und WebLogic
1. Zunächst muss die reine HTML-Datei einen Eintr...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11
Die Installations- und Konfigurationsmethoden von...
Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x
Inhaltsverzeichnis 1. Implementierungsprozess 2. ...
Detaillierte Erklärung langer Transaktionsbeispiele in MySQL
Vorwort: Die Artikelserie „Erste Schritte mit MyS...
Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.
Inhaltsverzeichnis Docker-System df Docker-System...
Tutorial zur Installation und Konfiguration von MySQL 5.7 unter CentOS7 (YUM)
Installationsumgebung: CentOS7 64-Bit, MySQL5.7 1...
Eine kurze Analyse von Linux resolv.conf
1. Einleitung resolv.conf ist die Konfigurationsd...
9 Möglichkeiten zum Ein- und Ausblenden von CSS-Elementen
Bei der Erstellung von Webseiten ist das Anzeigen...
Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching
Inhaltsverzeichnis 1. Komponentenwechselmethode M...
HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
In diesem Artikel werden hauptsächlich Beispiele ...
Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung
Dieser Artikel veranschaulicht anhand von Beispie...