1. Dynamisches Laden von Tabellen
1. Legen Sie zunächst die ID für die hinzugefügte Position der Tabelle in HTML fest
Das heißt, schreiben Sie ein div-Tag in das Body-Tag von HTML, um anzugeben, dass die Tabelle innerhalb dieses div hinzugefügt werden soll. wie folgt
<div id="tdl"><div>
2. Schreiben Sie die Anweisung zum Hinzufügen der Tabelle in Javascript
Wenn es sich in der aktuellen HTML-Datei befindet, wird es in das <script>-Tag geschrieben, z. B
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" // Die hier hinzugefügte Tabelle kann nach Ihren eigenen Bedürfnissen erstellt werden
</script>
Wenn Sie eine js-Datei importieren, schreiben Sie die folgende Anweisung direkt in die js-Datei (vorausgesetzt, es handelt sich um test.js).
Kopieren Sie den Codecode wie folgt:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
Führen Sie dann Ihre eigene HTML-Datei ein
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript" src="test.js"></script>
2. Fügen Sie Tabellenzeilen dynamisch hinzu
1. Legen Sie zunächst die ID für die Hinzufügungsposition der Tabellenzeile in HTML fest. Diese Position muss innerhalb von <tbody> liegen (nicht besonders genau, aber ich bin aufgrund meines Tests zu dieser Schlussfolgerung gelangt. Wenn Sie andere Methoden haben, hinterlassen Sie bitte eine Nachricht , danke), wie folgt
Kopieren Sie den Codecode wie folgt:
<Tabelle>
<thead></thead>
<tfoot><tfoot> //tfoot und thehead werden zusammen mit tbody verwendet, aber als ich schrieb, war es in Ordnung, sie nicht zu verwenden.
<tbody id="rows"></tbody>
</table>
[/s/S ]*/n
2. Im Javascript-Inhalt müssen Sie zunächst Zeilen und Zellen erstellen und dann wie folgt Zeilen in <.tbody> hinzufügen
[Code]
row=document.createElement("tr"); //Zeile erstellen
td1=document.createElement("tr"); //Zelle erstellen
td1.appendChild(document.createTextNode("content")); //Inhalt zur Zelle hinzufügen
row.appendChild(td1); //Zellen zur Zeile hinzufügen
document.getElementById("rows").append(row); //Zeilen zu <tbody> hinzufügen
3. Meine kleine Entdeckung (vielleicht wissen es andere schon...)
1. Ich habe selbst einen Test durchgeführt und <table id="tdl'></table> in HTML und document.getElementById("tdl").innerHTML="<tr><td></td> in Javascript </ geschrieben tr>“, nachdem Sie dies geschrieben haben, testen Sie es, die Zeilen der Tabelle im HTML werden nicht hinzugefügt.
2. Nachdem ich den obigen Test abgeschlossen hatte, habe ich ihn erneut geändert, um <table><tr><td id="t'><td><tr></table> in HTML und document.getElementById("t in Javascript " zu schreiben. ).innerHTML="<p>content</p>", der Test kann Inhalte hinzufügen.
3. Überlegung: Welche Schlussfolgerungen lassen sich aus den beiden oben genannten Tests ziehen? Welche Art von Tags können direkt über innerHTML hinzugefügt werden?