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
Konfigurationsprozess für selbststartende Dienste für einzelne Instanzen von MySQL5.7
1.MySQL-Version [root@clq-System]# mysql -v Willk...
Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3
Bisher kannten wir mehrere Hintergrundattribute i...
Ungewöhnliche, aber nützliche Tags in Xhtml
Xhtml hat viele Tags, die nicht häufig verwendet w...
Verschiedene Probleme, auf die Anfänger bei der Installation von MySQL in Docker stoßen
Vorwort In letzter Zeit dauert das Herunterfahren...
Eine einfache Möglichkeit, das Passwort in MySQL 5.7 zu ändern
Dies ist ein offizieller Screenshot. Nach der Ins...
Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
1. Einleitung Gilt es als Aufwärmen alter Themen,...
Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()
In MySQL liest die Funktion LOAD_FILE() eine Date...
MySQL 5.7.18 Master-Slave-Replikations-Setup (ein Master und ein Slave) Tutorial mit ausführlicher Erklärung
1. Replikationsprinzip Der Masterserver schreibt ...
Tiefgreifendes Verständnis der Probleme mit der Transaktionsisolationsebene und dem Sperrmechanismus von MySQL
Überblick Datenbanken führen im Allgemeinen mehre...
Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
Erfahrung im Webdesign
<br />Der Autor war früher ein Anfänger im W...
Detaillierte Erklärung des Plattformbusses des Linux-Treibers
Inhaltsverzeichnis 1. Einführung in den Plattform...
Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?
Als ich heute die Anmeldeseite geschrieben habe, ...
Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt
In CSS-Style-Datei angeben #class td /*Legen Sie ...
So erstellen Sie eine gespeicherte Prozedur in MySQL und fügen Datensätze in einer Schleife hinzu
Dieser Artikel beschreibt anhand eines Beispiels,...