JavaScript动态生成table中的数据

最新推荐文章于 2022-07-25 23:30:05 发布

我是滑稽帝滑滑稽

最新推荐文章于 2022-07-25 23:30:05 发布

阅读量453

点赞数

分类专栏：前端JS 文章标签： JavaScript动态加载后台json JavaScript动态生成table中

本文链接：https://blog.csdn.net/cacacacacacacaa/article/details/53338025

版权

前端JS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="tabletest">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>记录单号</th>
            <th>归属国家</th>
            <th>覆盖国家</th>
            <th>运营商</th>
            <th>卡数</th>
            <th>卡流量（GB）</th>
            <th>负责人</th>
            <th>状态</th>
            <th>最后编辑</th>
            <th>操作</th>
        </tr>
        </thead>
        <!--<tr>-->
        <!--<td>P20160615GB_006</td>-->
        <!--<td>GB</td>-->
        <!--<td>GB</td>-->
        <!--<td>EE</td>-->
        <!--<td>100</td>-->
        <!--<td>16.00</td>-->
        <!--<td>丁洁</td>-->
        <!--<td>已到卡</td>-->
        <!--<td>10-25 03:09</td>-->
        <!--<td>10-25</td>-->
        <!--</tr>-->
    </table>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var json = {
            tr: [{
                class: "tr_data odd",
                id_data: "5",
                role: "row",
                td: [
                    {
                        class: "td_purchase_no sorting_1",
                        value: "P20160615GB_006"
                    },
                    {
                        class: "td_country_code",
                        value:"AD"
                    },
                    {
                        class:"td_country_cover",
                        value:"AD"
                    },
                    {
                        class:"td_operator_id",
                        value:"2DEGREE"
                    },
                    {
                        class:"td_card_quantity",
                        value:"50"
                    },
                    {
                        class:"td_card_dataquota",
                        value:"5.00"
                    },
                    {
                        class:"td_supporter_id",
                        value:"丁洁"
                    },
                    {
                        class:"td_process_state",
                        value:"计划采购"
                    },
                    {
                        class:"td_modified",
                        value:"10 天前"
                    },
                    {
                        class:"operating",
                        value:"待定"
                    }
                ]
            },
            {
                class: "tr_data even",
                id_data: "7",
                role: "row",
                td: [
                    {
                        class: "td_purchase_no sorting_1",
                        value: "P20160615FR_006"
                    },
                    {
                        class: "td_country_code",
                        value:"FR"
                    },
                    {
                        class:"td_country_cover",
                        value:"FR"
                    },
                    {
                        class:"td_operator_id",
                        value:"2DEGREE"
                    },
                    {
                        class:"td_card_quantity",
                        value:"40"
                    },
                    {
                        class:"td_card_dataquota",
                        value:"3.00"
                    },
                    {
                        class:"td_supporter_id",
                        value:"丁洁"
                    },
                    {
                        class:"td_process_state",
                        value:"计划采购"
                    },
                    {
                        class:"td_modified",
                        value:"10 天前"
                    },
                    {
                        class:"operating",
                        value:"待定"
                    }
                ]
            }
            ],

        };
//
//        $.ajax({
//            type: "POST",
//            url: "test.php",
//            dataType: "JSON",
//            success:function (txy) {
//                var data = eval ("(" + txt + ")");
//            }
//        });
        var trlength = json.tr.length;
        function gettabledata() {
            for (var i = 0; i < trlength; i++) {
                $("table").append("<tr class='" + json.tr[i].class + "' id_data = '" + json.tr[i].id_data + "' role = '" + json.tr[i].role + "'><td class='" + json.tr[i].td[0].class + "'>" + json.tr[i].td[0].value + "</td>" +
                        "<td class='" + json.tr[i].td[1].class + "'>" + json.tr[i].td[1].value + "</td>" +
                        "<td class='" + json.tr[i].td[2].class + "'>" + json.tr[i].td[2].value + "</td>" +
                        "<td class='" + json.tr[i].td[3].class + "'>" + json.tr[i].td[3].value + "</td>" +
                        "<td class='" + json.tr[i].td[4].class + "'>" + json.tr[i].td[4].value + "</td>" +
                        "<td class='" + json.tr[i].td[5].class + "'>" + json.tr[i].td[5].value + "</td>" +
                        "<td class='" + json.tr[i].td[6].class + "'>" + json.tr[i].td[6].value + "</td>" +
                        "<td class='" + json.tr[i].td[7].class + "'>" + json.tr[i].td[7].value + "</td>" +
                        "<td class='" + json.tr[i].td[8].class + "'>" + json.tr[i].td[8].value + "</td>" +
                        "<td class='" + json.tr[i].td[9].class + "'>" + json.tr[i].td[9].value + "</td></tr>")
            }
        };
        gettabledata();
    });
</script>
</body>
</html>

我是滑稽帝滑滑稽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript动态生成table中的数据

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> link rel="
复制链接

扫一扫