Heim >Web-Frontend >HTML-Tutorial >Fügen Sie die angegebenen Daten dynamisch zur erstellten Tabelle hinzu (Quellcode).
Fügen Sie die angegebenen Daten dynamisch zur erstellten Tabelle hinzu (Quellcode).
- 云罗郡主nach vorne
- 2018-10-18 14:12:061811Durchsuche
In diesem Artikel geht es um das dynamische Hinzufügen bestimmter Daten zur erstellten Tabelle (Quellcode). Freunde in Not können darauf verweisen.
Idee:
Tabelle + Kopf + Tbody erstellen
Tr + erstellen th
Erstelle tr + td für jede Zeile
Zur Seite hinzufügen
Hinweis: Der Grund, warum es schließlich zur Seite hinzugefügt wird, besteht darin, dass die Seite jedes Mal aktualisiert wird, wenn die Tabelle zuerst im Speicher erstellt und dann auf einmal zur Seite hinzugefügt wird muss nur einmal aktualisiert werden, was den Leistungsverlust reduziert.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body></body><script>
var data = [
{ name : "jim1", age : 18, gender : "male"},
{ name : "jim2", age : 19, gender : "female"},
{ name : "jim3", age : 20, gender : "female"},
{ name : "jim4", age : 21, gender : "male"}
]; function createElement( tag ) {
return document.createElement( tag );
} var table = createElement( "table" ); var thead = createElement( "thead" ); var tbody = createElement( "tbody" );
table.appendChild( thead );
table.appendChild( tbody ); var trhead = createElement( "tr" );
thead.appendChild( trhead ); for ( var k in data[ 0 ] ){
th = createElement( "th" );
th.appendChild( document.createTextNode( k ) );
trhead.appendChild( th );
} for ( var i = 0; i < data.length; i++){ var tr = createElement( "tr" ); for ( var j in data[ i ]){
td = createElement( "td" );
td.appendChild( document.createTextNode( data[i][j] ));
tr.appendChild( td );
}
tbody.appendChild( tr );
} //table.setAttribute("border","1px");
//或直接设置table.border = "1px";两者等价。
table.border = "1px";
table.cellspadding = 0;
table.setAttribute("align","center");
table.style.textAlign = "center";
table.setAttribute("borderColor","skyBlue");
table.setAttribute("cellspacing",0);
document.body.appendChild( table );</script></html>Das Obige ist die vollständige Einführung in das dynamische Hinzufügen bestimmter Daten zur erstellten Tabelle (Quellcode). Ich hoffe, Sie können etwas über die PHP-Chinese-Website erfahren für mehr.
Das obige ist der detaillierte Inhalt vonFügen Sie die angegebenen Daten dynamisch zur erstellten Tabelle hinzu (Quellcode).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!