<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style type="text/css">

        * { padding: 0; margin: 0; }

        .demo { padding: 10px; }

        .demo table { border-collapse: collapse; }

        .demo table tr td { border: 1px solid #ccc; padding: 4px; }

        </style>

    </head>

    <body>

        <div id="demo" class="demo">  

        </div>

        <script type="text/javascript">

            function combine(arr) {

                var r = [];

                (function f(t, a, n) {

                    if (n == 0) return r.push(t);

                    for (var i = 0; i < a[n-1].length; i++) {

                        f(t.concat(a[n-1][i]), a, n - 1);

                    }

                })([], arr, arr.length);

                return r;

            }

            var arr = [

                ['1','2', '3'],

                ['a','b', 'c'],

                ['x','y','z'],

                ['e','f','g','h', 'i']];

            var res = combine(arr);  

             //合并单元格

            var row = [];

            var rowspan = res.length;

            for(var n=arr.length-1; n>-1; n--) {

                row[n] = parseInt(rowspan/arr[n].length);

                rowspan = row[n];

            }

            row.reverse();  

            //table tr td

            var str = "";

            var len = res[0].length;

            for (var i=0; i<res.length; i++) {

                var tmp = "";

                for(var j=0; j<len; j++) {

                    if(i%row[j]==0 && row[j]>1) {

                        tmp += "<td rowspan='"+ row[j] +"'>"+res[i][j]+"</td>";

                    }else if(row[j]==1){

                        tmp += "<td>"+res[i][j]+"</td>";

                    }

                }

                str += "<tr>" + tmp + "<td>xxx</td>" + "<td>xxx</td>" + "</tr>";

            }  

            //thead

            var th = "";

            for(var k=0; k<len; k++) {

                th += "<th>"+ k +"</th>";

            }

            th = "<thead>"+th+"<th>价格</th>" + "<th>数量</th>" +"</thead>";

            str = "<table>" + th + str + "</table>";  

            document.getElementById('demo').innerHTML = str;

        </script>

    </body>

</html>

效果如下：

动态生成sku组合输入列表的更多相关文章

  1. 结合element-ui表格自动生成sku规格列表

    最近在写一个根据输入的规格,属性值动态生成sku表格,实现的效果大致如图,这是在vue项目里,结合element-UI表格写的,写好了就整理了一下,把代码贴上来,方便以后使用,不过代码里还是有一些重复 ...

  2. 动态生成xml文件

    使用xmlParser动态生成xml,输入的字符编码是gbk,结果怎么生成都不行,后来把输入转成utf8之后, 再生成就ok了

  3. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  4. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  5. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  6. js—input框中输入数字，动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  7. 淘宝SKU组合查询算法实现

    淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报  分类: JavaScript(14)    目录(?)[+]   前端有多少事情可以做,能做到多 ...

  8. 动态生成页面（一）——ASP.NET中Literal使用

    在页面中加入内容时,假设是静态内容.无需使用容器,能够直接将标记作为HTML直接加入到页面中:可是,假设是动态内容,则必须借助容器将内容加入到页面中.典型的容器有:Label控件.Literal控件. ...

  9. WPF 动态生成DataGrid及动态绑定解决方案

    一.场景 有过WPF项目经验的朋友可能都知道,如果一个DataGrid要绑定静态的数据是非常的简单的(所谓静态是指绑定的数据源的类型是静态的),如下图所示,想要显示产品数据,只需绑定到一个产品列表即可 ...

随机推荐

  1. [SDOI] 仪仗队

    SDOI仪仗队 序 迎面冷风袭来 ​  我又该何去何从     哪里       是我的安居之处 正文 我们这个题有一个是很显然的想法,我们可以想到是跟 \(\gcd\) 有关,事实上没有任何分析的, ...

  2. JAVA面向对象 - 抽象类、接口

    抽象类 用abstract关键字来修饰一个类时,这个类就叫抽象类,用abstract关键字来修饰一个方式时,这个方法就是抽象方法.当一个类继承的父类是抽象类的话,需要我们把抽象类中的所有抽象方法全部实 ...

  3. LeetCode 面试题 02.06. 回文链表

    题目链接:https://leetcode-cn.com/problems/palindrome-linked-list-lcci/ 编写一个函数,检查输入的链表是否是回文的. 示例 1: 输入: 1 ...

  4. css3使用animation属性实现炫酷效果

    animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画 animation-name属性为动画指定一个名称 animation-name兼容主流的浏览器,不过还是需要加前 ...

  5. 剑指offer-面试题43-1~n整数中1出现的次数-归纳法

    /* 题目: 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数? 为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没 ...

  6. Python中字符串的学习

    Python中字符串的学习 一.字符串的格式化输出 % 占位符 %s 字符串 %d integer %x 十六进制 integer %f float 指定长度 %5d 右对齐,不足左边补空格 %-5d ...

  7. [USACO19DEC]Tree Depth P

    题意 求逆序对为\(k\)的\(n\)排列中,生成的笛卡尔数,每个位置的深度和.\(n\le 300\) 做法 设\(f_{k}\)为\(n\)排列中逆序对为\(k\)的个数,其生成函数为:\[\pr ...

  8. Wannafly Winter Camp 2020 Day 6C 酒馆战棋 - 贪心

    你方有 \(n\) 个人,攻击力和血量都是 \(1\).对方有 \(a\) 个普通人, \(b\) 个只有盾的,\(c\) 个只有嘲讽的,\(d\) 个有盾又有嘲讽的,他们的攻击力和血量都是无穷大.有 ...

  9. PHP 实现遍历出目录及其子文件

    手册(有PHP4的实现方式哦):https://www.php.net/manual/zh/function.scandir.php 直接附代码吧PHP5和PHP7 直接有scandir()函数,遍历 ...

  10. c++编程之内存模型

    我们在编程的时候,无可避免要申明变量,在这个变量可以是在()中,可以在{}中,也可以直接在外面,也可以用new的方式.那么当我们在申明变量的时候,实质上我们所做的工作是:关联了一个内存模型! 上代码: ...