JSON数据转成html表格

最新推荐文章于 2024-03-15 09:35:06 发布

ke0971

最新推荐文章于 2024-03-15 09:35:06 发布

阅读量8.8k

点赞数 1

分类专栏： HTML 实用网站

HTML 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

实用网站

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <script type="text/javascript" src="http://cj.cbcie.com/js/jquery-1.6.min.js"></script>
    <title></title>
</head>
<body>



    <div id="tabdiv">
        <table id="tabinfo">
            <tr>
                <td>金属</td>
                <td>class</td>
                <td>tableAttr</td>
                <td>tableAuditId</td>
                <td>tableAuditTime</td>
                <td>tableAuditType</td>
                <td>tableCountrys</td>
                <td>tableDataUpdId</td>
                <td>tableDataUpdTime</td>
                <td>tableDesc</td>
                <td>tableId</td>
                <td>tableIfCountry</td>
                <td>tableIfDataChart</td>
                <td>tableIfImg</td>
                <td>tableIfShow</td>
                <td>tableItemType</td>
                <td>tableName</td>
                <td>tableNameCn</td>
                <td>tableNum</td>
                <td>tableProducts</td>
                <td>tableProject</td>
                <td>tableProvinceId</td>
                <td>tableRows</td>
                <td>tableSort</td>
                <td>tableTableId</td>
                <td>tableType</td>
                <td>tableUnit</td>
                <td>tableUserId</td>
                <td>tableXTwo</td>
                <td>tableXTwoCn</td>
                <td>tableYTwo</td>
                <td>tableYTwoCn</td>
            </tr>
        </table>
    </div>

    <script src="1.js"></script>
    <script src="2.js"></script>
    <script type="text/javascript">

	var c1 = [{
		"class": "com.asianmetal.model.datacenter.MetalTable",
		"tableAttr": 1,
		"tableAuditId": 0,
		"tableAuditTime": "",
		"tableAuditType": 2,
		"tableCountrys": "44",
		"tableDataUpdId": 0,
		"tableDataUpdTime": "",
		"tableDesc": "共计21家 其中3家（隆盛祥、丰瑞、赣州华星）今年生产氢氟酸；内蒙古聚龙未投产；其余16家直接联系获得所有数据，多氟多通过第三方获得及平均库存获得。",
		"tableId": 2463,
		"tableIfCountry": 0,
		"tableIfDataChart": 0,
		"tableIfImg": 4,
		"tableIfShow": 1,
		"tableItemType": 15,
		"tableName": "China's aluminum fluoride producers' total number statistics by province by month",
		"tableNameCn": "中国氟化铝生产商公司总量分省份月度统计",
		"tableNum": "Quantity",
		"tableProducts": "4,357",
		"tableProject": "Producer",
		"tableProvinceId": "22,23,18,24,15,25,16,12,10,1,5,-1",
		"tableRows": 12,
		"tableSort": 0,
		"tableTableId": 276,
		"tableType": 2,
		"tableUnit": 8,
		"tableUserId": "",
		"tableXTwo": "",
		"tableXTwoCn": "",
		"tableYTwo": "",
		"tableYTwoCn": ""
	},
	{
		"class": "com.asianmetal.model.datacenter.MetalTable",
		"tableAttr": 1,
		"tableAuditId": 0,
		"tableAuditTime": "",
		"tableAuditType": 2,
		"tableCountrys": "44",
		"tableDataUpdId": 0,
		"tableDataUpdTime": "",
		"tableDesc": "共计21家 其中3家（隆盛祥、丰瑞、赣州华星）今年生产氢氟酸；内蒙古聚龙未投产；其余16家直接联系获得所有数据，多氟多通过第三方获得及平均库存获得。",
		"tableId": 2449,
		"tableIfCountry": 0,
		"tableIfDataChart": 1,
		"tableIfImg": 4,
		"tableIfShow": 1,
		"tableItemType": 1,
		"tableName": "China's aluminum fluoride producers' production capacity statistics by province by month",
		"tableNameCn": "中国氟化铝生产商产能分省份月度统计",
		"tableNum": "Quantity",
		"tableProducts": "4,357",
		"tableProject": "Producer",
		"tableProvinceId": "18,15,25,12,5,0,-1",
		"tableRows": 7,
		"tableSort": 0,
		"tableTableId": 276,
		"tableType": 2,
		"tableUnit": 2,
		"tableUserId": "",
		"tableXTwo": "",
		"tableXTwoCn": "",
		"tableYTwo": "",
		"tableYTwoCn": ""
	}]

        var tabname = new Array("class", "tableAttr", "tableAuditId", "tableAuditTime", "tableAuditType", "tableCountrys", "tableDataUpdId", "tableDataUpdTime", "tableDesc", "tableId", "tableIfCountry", "tableIfDataChart", "tableIfImg", "tableIfShow", "tableItemType", "tableName", "tableNameCn", "tableNum", "tableProducts", "tableProject", "tableProvinceId", "tableRows", "tableSort", "tableTableId", "tableType", "tableUnit", "tableUserId", "tableXTwo", "tableXTwoCn", "tableYTwo", "tableYTwoCn");
        function showPriceDesc(c,metal) {
            //$(".tabinfo").remove();

            for (var i = 0; i < c.length; i++) {
                var showHtml = "<tr>";
                showHtml += '<td>' + metal + '</td>';
                for (var j = 0; j < tabname.length; j++) {
                    if (c[i].hasOwnProperty(tabname[j]))
                        showHtml += '<td>' + c[i][tabname[j]] + '</td>';
                    else
                        showHtml += '<td> </td>';
                }
                showHtml += "</tr>";
                $("#tabinfo").append(showHtml);
            }
        }


        showPriceDesc(c1, "铝");
        //showPriceDesc(c2, "铜");
    </script>
</body>
</html>

ke0971

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JSON数据转成html表格

var c1 = [{ "class": "com.asianmetal.model.datacenter.MetalTable", "tableAttr": 1, "tableAuditId": 0, "tableAuditTime": "", "tableAuditType": 2, "tableCountrys": "44", "tab
复制链接

扫一扫

专栏目录