将给定的数据动态加入到创建的表格中（源代码）

本篇文章给大家带来的内容是关于将给定的数据动态加入到创建的表格中（源代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

思路：

1. 创建 table + thead + tbody

2. 创建 tr + th

3. 创建每一行的 tr + td

4. 加到页面中

注：最后再加到页面中的原因是每将一个元素加到页面一次，页面便会刷新一次，因此先在内存中创建好表格再一次性的加到页面中，页面只需刷新一次，减少性能的损失。

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

以上就是对将给定的数据动态加入到创建的表格中（源代码）的全部介绍，本文内容紧凑，希望大家可以有所收获，更多请关注PHP中文网。

以上就是将给定的数据动态加入到创建的表格中（源代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！