HTML表格动态填充示例-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaozhigang117/article/details/52349128

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/js/jquery.min.js"></script>
</head>
<body>
    <table border="1px" width="500" height="150">
        <tr>
            <td colspan="2" rowspan="2">featurename</td>
            <td colspan="2" >activity1</td>
            <td colspan="2" >activity2</td>
            <td colspan="2" >activity3</td>
            <td colspan="2" rowspan="2">1</td>
        </tr>
        <tr>
            <td>tatla</td>
            <td>tate</td>
            <td>tatla</td>
            <td>tate</td>
            <td>tatla</td>
            <td>tate</td>
        </tr>
        <tr>
            <td colspan="2" >send espace message</td>
            <td>0</td>
            <td>0%</td>
            <td>1</td>
            <td>1%</td>
            <td>2</td>
            <td>2%</td>
            <td colspan="2" >1</td>
    </table>
    <script>
        var arr = [];
        $.get("../json/clude_test.json", function (result) {
            var a = result.result.value.features;
            for (var k in a) {//循环features
                var tr=$("<tr></tr>");
                for (var j in a[k]) { //遍历activitys
                    var  td="<td colspan='2'>"+j+"</td>";
                    console.log(j);
                    for (var m in a[k][j]) {
                        td+="<td>"+a[k][j][m].activity+"</td>"+"<td>"+a[k][j][m].passRate+"</td>";
                        console.log(a[k][j][m].activity);
                    }
                    $(tr).append(td);
                    console.log(tr.html());
                }
                $("table").append(tr);
            }
        });

<span style="white-space:pre">	</span><pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="html">var jsons=

{ "result": { "value": { "features": [ { "send espace message": [ { "total": 0, "featureName": "send espace message", "activity": "1", "passRate": "0%", "uri": "d94odp09frd1" }, { "total": 1, "featureName": "send espace message", "activity": "2", "passRate": "1%", "uri": "d94odp09frd1" }, { "total": 2, "featureName": "send espace message", "activity": "3", "passRate": "2%", "uri": "d94odp09frd1" } ] }, { "send espace message1": [ { "total": 0, "featureName": "send espace message", "activity": "1", "passRate": "0%", "uri": "d94odp09frd1" } ] }, { "APILoadTest": [ { "total": 0, "featureName": "APILoadTest", "activity": "1", "passRate": "0%", "uri": "3e1of4bd1s0" } ] } ], "total": 2, "passRate": " � " } }, "requestId": "e95528e4-6a01-4e74-8169-c6816c8510a4", "serverAddress": "(10.21.51.210:8080)", "status": "ok"}