js解析多层json转为层级table，js动态添加td的倍数 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table td{
            width: 100px;
            height: 15px;
        }
    </style>
</head>
<body>
<table id="mm" border="1" >
    <tbody id="tbody"></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var data = {
        "list": [{
            "list": [{
                "list": "111", "value": "2"
            }], "value": "1"
        }, {
            "list": [{
                "list": "222", "value": "3"
            }], "value": "4"
        }]
    }

    var trStr = "";
    $.each(data, function (tmp, tb) {
        $.each($(this), function (i, n) {
            trStr += '<tr height="25px" class="example">';//拼接处规范的表格形式
            trStr += '<td colspan="2" width="10%" align="center">' + n.value + '</td>';
            trStr += '<td colspan="2" width="10%" align="center"></td>';
            trStr += '</tr>';
            $.each(n.list, function (i1, n1) {
                console.log(n1)
                trStr += '<tr height="25px" class="example">';//拼接处规范的表格形式
                trStr += '<td colspan="2" width="10%" align="center"></td>';
                trStr += '<td colspan="2" width="10%" align="center">' + n1.value + '</td>';
                trStr += '</tr>';

            })
        })
    })


    $("#tbody").html(trStr);
</script>
</body>
</html>

效果图如下：

posted @ 2018-08-24 10:34  hanlei525  阅读(209)  评论(0)    收藏  举报