Fügen Sie die angegebenen Daten dynamisch zur erstellten Tabelle hinzu (Quellcode).-HTML-Tutorial-php.cn

Fügen Sie die angegebenen Daten dynamisch zur erstellten Tabelle hinzu (Quellcode).

云罗郡主

Freigeben： 2018-10-18 14:13:08

nach vorne

1801 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!