如何用js对象生成表格？
var data = {
column: [
"责任",
"内容",
"工作项目"
],
list: [
{
label: "学习研究1",
list: [
{
label: "学习贯彻1",
list: [
{
label: "及时学习贯彻党风廉政建设会议、文件精神"
},
{
label: "及时学习贯彻党风廉政建设会议、文件精神"
},
{
label: "及时学习贯彻党风廉政建设会议、文件精神"
}
]
},
{
label: "学习贯彻2"
}
]
},
{
label: "学习研究2"
}
]
};如上json对象怎么生成表格呢？涉及到rowspan感觉好复杂啊
展开
收起
1
条回答
写回答
写回答
-
IT从业有点意思，写了个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>有点意思，写了个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>有点意思，写了个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>有点意思，写了个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>有点意思，写了个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>有点意思，写了个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>2019-07-17 19:28:53赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
