前端之动态table

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/81159495

var  jsonHead=[
      {
        "name": "操作"
      },
      {
        "name": "类型"
      },
      {
        "name": "名称"
      },
      {
        "name": "状态"
      },
      {
        "name": "PH值"
      }
    ]

    var jsonBody=[
      {
        "col1": "<a>新增</a>",
        "col2": "河流",
        "col3": "大羊沟",
        "col4": "待审批",
        "col5": 0.6
      },
      {
        "col1": "<a>查看</a>",
        "col2": "河流",
        "col3": "大羊沟",
        "col4": "通过",
        "col5": 0.3
      }
    ]

    //载入表头数据        
    var datasource =  jsonHead;

    for (var i = 0;i < datasource.length; i++ ) {
         $("#table_thead_tr").append(" <th>" + datasource[i].name + "</th>");
     }

   //载入表内数据    
    var datasource =  jsonBody;
    var stringTr = "", stringTd = "";

    for (var i = 0; i < datasource.length; i++) {
        stringTd = "";
        for(var obj in datasource[i] )
        {
            stringTd += "<td style='text-align:center;'>" + datasource[i][obj]+"</td>";
        }
        stringTr = "<tr>" + stringTd + "</tr>";
        $("#table_tbody_tr").append(stringTr);
    }