获取后端JSON数据，前端动态创建渲染表格

后端提交的值

 

 

html页面

 

访问

<style>
    * { padding: 0; margin: 0; }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }

    th,td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
    }

    td {
        font: 14px "微软雅黑";
    }
    tbody tr {
        background-color: #f0f0f0;
    }
    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>

 

<table  class="table table-bordered table-hover" id="table_container">


</table>

<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js'"></script>
<script src="/static/js/ajaxsetup.js"></script>
<script src="/rbac/static/js/menu.js "></script>
{% block js %} {% endblock %}



$.get("{% url 'namespace_api' %}",function (res) {
    $(function () {
        var html = "";
        html += "<thead><tr><th>命名空间</th> + <th>labels标签</th> + <th>日期</th>+<th>操作</th></tr></thead>"
        for( var i = 0; i < res.data.length; i++ ) {
            html += "<tr>";
            html +=     "<td>" + res.data[i].name + "</td>"
            html +=     "<td>" + res.data[i].labels + "</td>"
            html +=     "<td>" + res.data[i].create_time + "</td>"
            html +=     "<td>" + "<button class='btn-primary btn'>"+"编辑" + "</button>" + "</td>"
            html += "</tr>";
        }
        $("#table_container").html(html);
    })
    {#alert(JSON.stringify(res.data[1]))#}

})