js 用什么方法能生成如下电商商品属性表格

zcl3911 2017-11-07 01:54:31



var totalList = [];
var json1={name:"规格",data:["大","小"]};
var json2={name:"颜色",data:["红色","黑色"]};
var json3={name:"尺寸",data:["1寸","2寸"]};
var json4={name:"模式",data:["普通","特殊"]};
totalList.push(json1);
totalList.push(json2);
totalList.push(json3);
totalList.push(json4);


类似上面这段json 想生成类似上图这样的表格,需要用到递归吗?如果用到应该怎么写,不用递归 应该怎么做,求大神解答
...全文
306 3 打赏 收藏 举报
写回复
3 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
Go 旅城通票 2017-11-07
<script>
    var json1 = { name: "规格", data: ["大", "小"] };
    var json2 = { name: "颜色", data: ["红色", "黑色", "蓝色"] };
    var json3 = { name: "尺寸", data: ["1寸", "2寸"] };
    var sizeRowSpan = json2.data.length * json3.data.length, colorRowSpan = json3.data.length;
    var s = '', sizeTD = '', colorTd = '';
    for (var i = 0; i < json1.data.length; i++) {
        sizeTD = '<td rowspan="' + sizeRowSpan + '">' + json1.data[i] + '</td>'
        for (var j = 0; j < json2.data.length; j++) {
            colorTd = '<td rowspan="' + colorRowSpan + '">' + json2.data[j] + '</td>'
            for (var k = 0; k < json3.data.length; k++) {
                s += '<tr>' + (k == 0 ? sizeTD + colorTd : '') + '<td>' + json3.data[k] + '</td><td>其他输入项</td></tr>'
            }
            sizeTD = '';
        }
    }
    document.write('<table border="1">' + s + '</table>')
</script>
  • 打赏
  • 举报
回复
zcl3911 2017-11-07
引用 1 楼 showbo 的回复:
不就是样式,颜色和尺寸的全排列,你的样式是什么鬼,模式还是规格,而且另外一组数据干嘛用的 Web开发学习资料推荐 easyui datagrid fitColumns:true失效解决办法 jquery attr prop 区别
对就是全排列,表格的图片 就是给的一个参考,第二组 是 需要组成表格的 数据 ,主要是这个全排列应该怎么写呢?能给小弟解答一下,写个小demo 做个参考吗
  • 打赏
  • 举报
回复
Go 旅城通票 2017-11-07
不就是样式,颜色和尺寸的全排列,你的样式是什么鬼,模式还是规格,而且另外一组数据干嘛用的

Web开发学习资料推荐
easyui datagrid fitColumns:true失效解决办法
jquery attr prop 区别
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2017-11-07 01:54
社区公告
暂无公告