前端之动态table

最新推荐文章于 2024-07-06 01:35:56 发布

qq_597221342

最新推荐文章于 2024-07-06 01:35:56 发布

阅读量525

点赞数

分类专栏：前端之js

本文链接：https://blog.csdn.net/qq_36251118/article/details/81159495

版权

前端之js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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);
    }