Ajouter dynamiquement les données données à la table créée (code source)-tutoriel HTML-php.cn

Ajouter dynamiquement les données données à la table créée (code source)

云罗郡主

Libérer： 2018-10-18 14:13:08

avant

1811 Les gens l'ont consulté

Ce que cet article vous apporte concerne l'ajout dynamique de données données à la table créée (code source). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Idée :

Créer table + tête + corps
Créer tr + th
Créer tr + td pour chaque ligne
Ajouter à la page

Remarque : La raison pour laquelle il est finalement ajouté à la page est que chaque fois qu'un élément est ajouté à la page, la page sera actualisée. Par conséquent, le tableau est d'abord créé dans la mémoire puis ajouté à la page en une seule fois. ne doit être actualisé qu’une seule fois, ce qui réduit la perte de performances.

<!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>

Copier après la connexion

Ce qui précède est l'introduction complète à l'ajout dynamique de données données à la table créée (code source). Le contenu de cet article est compact. J'espère que vous pourrez gagner quelque chose. Site Web chinois pour en savoir plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!