如何用js对象生成表格？

var data = {
    column: [
        "责任",
        "内容",
        "工作项目"
    ],
    list: [
        {
            label: "学习研究1",
            list: [
                {
                    label: "学习贯彻1",
                    list: [
                        {
                            label: "及时学习贯彻党风廉政建设会议、文件精神"
                        },
                        {
                            label: "及时学习贯彻党风廉政建设会议、文件精神"
                        },
                        {
                            label: "及时学习贯彻党风廉政建设会议、文件精神"
                        }
                    ]
                },
                {
                    label: "学习贯彻2"
                }
            ]
        },
        {
            label: "学习研究2"
        }
    ]
};

如上json对象怎么生成表格呢？涉及到rowspan感觉好复杂啊
图片描述

阅读 5.1k

有点意思，写了个DEMO，参考一下
思路是：
1、计算每一个主label的最终子label数量
2、将这个数量加入到rowspan
3、为了生成表格，将整体json做成统一形式，即每一个label都有list匹配

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/lodash.js/3.10.1/lodash.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function($) {
        var data = {
            column: [
                "责任",
                "内容",
                "工作项目"
            ],
            list: [
                {
                    label: "学习研究1",
                    list: [
                        {
                            label: "学习贯彻1",
                            list: [
                                {
                                    label: "及时学习贯彻党风廉政建设会议、文件精神"
                                },
                                {
                                    label: "及时学习贯彻党风廉政建设会议、文件精神"
                                },
                                {
                                    label: "及时学习贯彻党风廉政建设会议、文件精神"
                                }
                            ]
                        },
                        {
                            label: "学习贯彻2"
                        }
                    ]
                },
                {
                    label: "学习研究2"
                }
            ]
        };

        //********************************************************
        // 这里的代码是用来让表格好看一点的
        _.forEach(data.list, function(list1, k1){
            if(_.isEmpty(data.list[k1].list)) {
                    data.list[k1].list = [{label:"", list:[{label:""}]}];
                }
            _.forEach(list1.list, function(list2, k2){
                if(_.isEmpty(data.list[k1].list[k2].list)) {
                    data.list[k1].list[k2].list = [{label:""}];
                }
            });
        });
        //********************************************************

        var c = 0;
        _.forEach(data.list, function(list1, k1){
            var c1 = 0;
            _.forEach(list1.list, function(list2, k2){
                var c2 = _.size(list2.list);
                c2 == 0 ? c2 = 1 : 1;
                data.list[k1].list[k2].len = c2;
                c1 += c2;
            });
            c1 == 0 ? c1 = 1 : 1;
            data.list[k1].len = c1;
            c += c1;
        });
        data.list.len = c;

        var compiled = _.template($("#table_tmpl").text());
        $("body").html(compiled(data));
    });
    </script>

    <script type="text/template" id="table_tmpl">
        <table cellpadding=1 cellspacing=1 border=1>
            <tr><% _.forEach(column, function(col_name, k) { %><td><%- col_name %></td><% }); %></tr>
            
            <%_.forEach(list, function(_sublist1, k1){ %>
            <tr>
                <td rowspan="<%- _sublist1.len %>"><%- _sublist1.label %></td>
                <%_.forEach(_sublist1.list, function(_sublist2, k2){ %>
                <td rowspan="<%- _sublist2.len %>"><%- _sublist2.label %></td>
                    <%_.forEach(_sublist2.list, function(_sublist3, k3){ %>
                        <td><%- _sublist3.label %></td></tr>
                    <%}); %>

                <%}); %>
            </tr>
            <%}); %>
        </table>
    </script>
</head>
<body>
   
</body>
</html>

如何用js对象生成表格？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？