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
25 Vue-Tipps, die Sie kennen müssen
Inhaltsverzeichnis 1. Beschränken Sie Requisiten ...
Eine kurze Analyse der Crontab-Aufgabenplanung in Linux
1. Erstellen Sie eine Planungsaufgabe Anweisung c...
CSS Sticky Footer Mehrere Implementierungen
Was ist „Sticky Footer“ Der sogenannte „Sticky Fo...
Lösung für falsche Zeichenfolgenwerte in MySQL
Viele Freunde berichten von folgendem Fehler, wen...
CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann
Popup-Fenster werden in der tatsächlichen Entwick...
Detaillierte Erklärung der Unterschiede zwischen den vier Positionierungsarten in CSS
Wir alle wissen, dass die in der Front-End-Entwic...
Wie stellt MySQL die Datenintegrität sicher?
Die Bedeutung von Datenkonsistenz und -integrität...
Detaillierte Erläuterung der praktischen Anwendung der Centos7 ESXi6.7-Vorlage
1. Erstellen Sie ein Centos7.6-System und optimie...
Natives JS zum Erzielen von Book-Flipping-Effekten
In diesem Artikel wird ein mit nativem JS impleme...
Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS
Das in diesem Artikel beschriebene gleichbreite L...
Warum MySQL das Löschen von Daten nicht empfiehlt
Inhaltsverzeichnis Vorwort InnoDB-Speicherarchite...
Einführung in die Verwendung von MySQL-Quellbefehlen
Inhaltsverzeichnis Gedanken, die durch eine Onlin...
Rückgängigmachen der Anmeldung in MySQL
Konzepteinführung: Wir wissen, dass das Redo-Log ...
Die 10 klassischen Optimierungsfälle und -szenarien von MySQL
Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...
SQL implementiert Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen auf zwei benachbarten Datenzeilen
SQL implementiert Additions-, Subtraktions-, Mult...