1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style type="text/css">
  7.         * { padding: 0; margin: 0; }
  8.         .demo { padding: 10px; }
  9.         .demo table { border-collapse: collapse; }
  10.         .demo table tr td { border: 1px solid #ccc; padding: 4px; }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="demo" class="demo">  
  15.  
  16.         </div>
  17.         <script type="text/javascript">
  18.             function combine(arr) {
  19.                 var r = [];
  20.                 (function f(t, a, n) {
  21.                     if (n == 0) return r.push(t);
  22.                     for (var i = 0; i < a[n-1].length; i++) {
  23.                         f(t.concat(a[n-1][i]), a, n - 1);
  24.                     }
  25.                 })([], arr, arr.length);
  26.                 return r;
  27.             }
  28.             var arr = [
  29.                 ['1','2', '3'],
  30.                 ['a','b', 'c'],
  31.                 ['x','y','z'],
  32.                 ['e','f','g','h', 'i']];
  33.             var res = combine(arr);  
  34.  
  35.              //合并单元格
  36.             var row = [];
  37.             var rowspan = res.length;
  38.             for(var n=arr.length-1; n>-1; n--) {
  39.                 row[n] = parseInt(rowspan/arr[n].length);
  40.                 rowspan = row[n];
  41.             }
  42.             row.reverse();  
  43.  
  44.             //table tr td
  45.             var str = "";
  46.             var len = res[0].length;
  47.             for (var i=0; i<res.length; i++) {
  48.                 var tmp = "";
  49.                 for(var j=0; j<len; j++) {
  50.                     if(i%row[j]==0 && row[j]>1) {
  51.                         tmp += "<td rowspan='"+ row[j] +"'>"+res[i][j]+"</td>";
  52.                     }else if(row[j]==1){
  53.                         tmp += "<td>"+res[i][j]+"</td>";
  54.                     }
  55.                 }
  56.                 str += "<tr>" + tmp + "<td>xxx</td>" + "<td>xxx</td>" + "</tr>";
  57.             }  
  58.  
  59.             //thead
  60.             var th = "";
  61.             for(var k=0; k<len; k++) {
  62.                 th += "<th>"+ k +"</th>";
  63.             }
  64.             th = "<thead>"+th+"<th>价格</th>" + "<th>数量</th>" +"</thead>";
  65.             str = "<table>" + th + str + "</table>";  
  66.  
  67.             document.getElementById('demo').innerHTML = str;
  68.         </script>
  69.     </body>
  70. </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. Git操作：查看所有分支的提交修改

    我们在廖雪峰Git教程或者一些书籍学习git分支时,大都会学习到这样一个命令git log --graph或者就是单纯的git log,他可以用来查看当前分支.但是这个弊端就是:它只能查看与当前分支有 ...

  2. springboot + mybatis 支持oracle和mysql切换含源码

    1.springboot 启动类加入bean 如下 // DatabaseIdProvider元素主要是为了支持不同的数据库@Beanpublic DatabaseIdProvider getData ...

  3. 谷歌BBR拥塞算法内核更新

    为什么想到这个呢,算法什么的又不太懂,这是 因为搭建VPN + BBR 与之简直绝配 有的人搭建SSR ,配一个什么锐速,还需要降内核版本, 而且还容易出错,降了之后更加容易出现兼容性问题,所以偶尔看 ...

  4. 使用ASP.NET Core 3.x 构建 RESTful API - 5.1 输入验证

    说到验证,那就需要做三件事: 定义验证规则 按验证规则进行检查 报告验证的错误.在把错误报告给API消费者的时候,报告里并不包含到底是服务端还是API消费者引起的错误,这是状态码的工作.而通常响应的B ...

  5. c++标准库与对应的函数

    #include <algorithm> sort(obj.begin(),obj.end());//从小到大 reverse(obj.begin(),obj.end());//从大到小 ...

  6. Charles抓包工具的破解以及使用

    一.破解 官网下载Charles 下载Charles.jar ,然后按照后在Charles→lib中替换掉Charles.jar 链接:https://pan.baidu.com/s/1XZ-aZI5 ...

  7. 剑指offer-面试题52-两个链表的第一个公共节点-链表

    /* 题目: 求两个链表的第一个公共节点. */ /* 思路: 见代码. */ #include<iostream> #include<cstring> #include< ...

  8. Failed to resolve: com.android.support:appcompat-v7:29.+ 版本不一致错误

    这个问题,困扰了我一天,终于解决, 问题的根本就是 Android studio 的 SDK Build-Tools 与工程所需的不一致.具体讲解如下: 具体解决方案: 1.既然是版本问题,那就的先去 ...

  9. vscode侧边栏字体大小修改

    1.找到安装路径下,workbench.desktop.main.css 文件 C:\z_my_install\Microsoft VS Code\resources\app\out\vs\workb ...

  10. Python中字符串的学习

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