html页面的排列组合算法怎么做?最后需要显示数据到table上 5C

现在做一个商城后台,有个需求,就是点击选择商品规格后,动态的出现按照选择的规格排列组合出现的一些商品规格组合,并分配sku

图片说明

请问这样的在js里面写逻辑可以实现吗?要怎么实现?还是放在后台去处理比较好?

4个回答

两个嵌套循序就可以。如果数据量不大或逻辑不复杂的话,JS可以独立完成。

(关于SKU是在网上搜的,编号也不懂,若有误,请自己按照需求自行修正)

1、SKU是产品编号,指代产品规格(尺码、颜色)、单价、库存等销售属性。

当选择了尺码和颜色时,需要唯一确定SKU编号。

2、想要自动分配SKU编号,就看商城制定的是什么样的规则;

假说SKU编号规则是 PS{尺码}C{颜色}。示例M号黑色的,表示为 PSmCblack

将尺码和颜色对应的数值放到标签的data属性中

示例页面元素定义:

<div>
    <div>
        <label>尺码:</label>
        <ul id="list_size">
            <li data-no="m"><input type="checkbox">M</li>
            <li data-no="x"><input type="checkbox">X</li>
            <li data-no="xl"><input type="checkbox">XL</li>
        </ul>
    </div>
    <div>
        <label>颜色:</label>
        <ul id="list_color">
            <li data-no="black"><input type="checkbox">黑色</li>
            <li data-no="red"><input type="checkbox">红色</li>
            <li data-no="white"><input type="checkbox">白色</li>
        </ul>
    </div>
    <button id="btnSelect">选择</button>
    <hr>
    <!-- 呈现选择的数据 -->
    <table id="products">
        <thead>
            <tr>
                <th>尺码</th>
                <th>颜色</th>
                <th>价格</th>
                <th>SKU</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

选择事件处理

//选择处理事件
document.getElementById('btnSelect').addEventListener("click", function(){
    //选择的尺码
    let selectedSizeds = document.querySelectorAll("#list_size input:checked");
    //选择的颜色
    let selectedColors = document.querySelectorAll("#list_color input:checked");
    //校验略
    //合成
    let arrContent = [];
    selectedSizeds.forEach(item_outer => {  //遍历尺寸
        let sizeNode = item_outer.parentNode;
        //尺码编号
        let size = sizeNode.dataset.no; 
        selectedColors.forEach(item_inner => {  //遍历颜色
            let colorNode = item_inner.parentNode;
            //颜色编号
            let color = colorNode.dataset.no;
            let skuno = `PS${size}C${color}`;

            //行数据
            arrContent.push(`<tr><td>${sizeNode.innerText}</td><td>${colorNode.innerText}</td><td><input class="txt" /></td><td>${skuno}</td></tr>`);
        });
    });
    //写入到列表中
    document.querySelector("#products tbody").innerHTML = arrContent.join("");
});

把你的选择传到后面,后面根据条件在数据库中查询出来,再用json传给你,你解析一下json就好

你要是用js设置,你可以试试jQuery写一下,具体太复杂了,你自己试试吧

这个最好用后台处理成数组在前台循环就是了,js写就
麻烦了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
排列组合算法
大虾们,rn求一排列组合的写法:rnrn01,02,03,04,05,06,07,08,09,10.....21 这21数字中!!rn想得到的结果为:任取6位组成一个字串,rn如:01,02,03,04,05,06 ;05,06,07,08,09,10 ;03,04,05,06,07,08 .......rnrn全部有多少种,并全部输出 (能够汇成表格)rn
排列与组合算法
组合算法:比如从集合m中选取n个元素,记为{n|m} 算法思路: 1. 创建一个数组,每个数组元素对应一个m中元素,该数组元素值为1,代表其对应m中的元素已被选中,否则没被选中 2. 初始化数组前面n个元素成1,代表第一种组合 3. 从左往右扫描“10”组合,并将首次发现该组合,该成“01” 4. 将该组合前面的所有1,遇到最左端 5. 回到第三步,直到找不到“10”组合为主,
html页面解析json,显示到table
"\"taskList\":[rn \"name\":\"陈国新\",\"taskName\":\"1.2G光站产品设计任务书\",\"actStatus\":\"懒惰\",\"preStatus\":\"正常进\",\"planStartTime\":\"20170613\",\"updTime\":\"20170621\",\"proName\":\"1.2G光站、光发\",\"proTeam\":\"HFC组\",\"planEndTime\":\"20170619\",\"taskNo\":\"HFC-2017016-010\",rn \"name\":\"邓小峰\",\"taskName\":\"现有软件框架部分命令行优化\",\"actStatus\":\"懒惰\",\"preStatus\":\"正常进\",\"planStartTime\":\"20170601\",\"updTime\":\"20170623\",\"proName\":\"自研OLT项目-野外型-4GE\",\"proTeam\":\"EPON组\",\"planEndTime\":\"20170630\",\"taskNo\":\"PON-2017702-050\"rn ]"rn这样的json怎么显示到table中rn求例子
字符串排列组合算法
全排列所谓全排列,就是打印出字符串中所有字符的所有排列。例如输入字符串abc,则打印出 a、b、c 所能排列出来的所有字符串 abc、acb、bac、bca、cab 和 cba 。#include #include static int number=0; void Swap(char *a ,char *b) { char temp = *a; *a = *b; *b = temp
求排列组合算法
排列:rnchar obj[] = 0,1,2,3,4,5,6,7,8;rnrnobj 中包含九个字符,请打印出从这个九个字符中任意取出n个数的结果,即P(m,n)排列rnrn在网上搜集很久,只找到了全排列的算法实现,但这种通用的排列的算法实现没找到,哪位高人愿意共享一下自己的算法实现?或给指定一个现成的排列组合算法实现库?rn非常感谢,感觉这算法很普通的,为什么就没有人实现呢?rn只有30分了,全部奉上!
排列组合算法问题
比如rn01 02 03 04 05 06 07 08rn取其中的任意6个组合rn输出所有的组合字符串
求教两个排列组合算法
1、1--N的整数,每次只交换相邻两个数,如何在N!次交换中,得到所有的排列情况?rnrn2、有N个数,分别属于M了类(M
java实现排列组合算法
1、组合 package com.ubs.is;import java.util.ArrayList;import java.util.BitSet;public class Combination {    private ArrayList&amp;lt;String&amp;gt; combList = new ArrayList&amp;lt;String&amp;gt;();    public void mn(S...
求高手排列组合算法
例如下面的例子:rn数组1: "S1","S2","S3"rn数组2: "B2"rn数组3: "C1","C2"rn得到结果 "S1,B2,C1","S1,B2,C2",“S2,B2,C1”,“S2,B2,C2”,"S3,B2,C1","S3,B2,C2"rnrn我想得到上面的所有排列组合算法,求大神有没方法,如何做??
C# 排列组合算法问题
假设有M(M>1)个桶子,每个桶子里面有N(N>=1)个不同颜色的球rn从M个桶子里面各取一个球,要求输出所有的组合。rn例如:rnrn有2个桶子,各有红球,蓝球一个,输出rnrn红球 | 蓝球rn蓝球 | 蓝球rn红球 | 红球rn蓝球 | 红球rnrn最好有程序源码。
算法之排列与组合算法
1. 前言 本文介绍了常用的排列组合算法,包括全排列算法,全组合算法,m个数选n个组合算法等。 2. 排列算法 常见的排列算法有: (A)字典序法 (B)递增进位制数法 (C)递减进位制数法 (D)邻位对换法 (E)递归法 介绍常用的两种: (1) 字典序法 对给定的字符集中的字符规定了一个先后关系,在此基础上按照顺序依次产生每个排列。 [例]字符集{1,2,3},较小的数...
C++:排列组合算法
转载请注明出处1 介绍排列(Permutation)和组合(Combination)是两个基础的数学概念。计算排列与组合可以解决一些实际的工程问题,掌握排列组合计算的方法是十分重要的。目前,网上已经有一些计算排列组合的算法,比如[1]。这里我也给出一个组合计算方法。该计算方法采用了分治的思想,代码实现采用了递归的方式。2 组合算法2.1 设计思路组合问题:在序列An={1,2,3,4,5,6,.....
排列组合算法 java
排列组合问题,最简洁有效的方法则是利用递归 一、无重复数据选K个组合: /* * 无重复数据组合--dfs解法   * data为数据 re为结果, curpo为当前位置,curlen为当前结果的长度 ,K为目标长度  *例如 data=“123456”  选3个字符组合,则调用----combByDfs(data,"",0,0,3); */ public static void
Java排列组合算法
Java排列组合算法
排列组合算法-----使用递归
import java.util.Arrays; import java.util.Deque; import java.util.HashSet; import java.util.Iterator; import java.util.LinkedList; import java.util.Set; /**  * 用1,2,2,3,4,5来打印出所有的排列组合信息  * 要求3
排列组合算法封装2
1.指定字符数组,从中抽取m个,组合,不重复 使用方法: string str = "1234"; //字符数组中抽取2个进行组合 Extract extract = new Extract(str, 2); extract.OnCreateOneGroup += (e) => { Console.WriteLine(e); }; extract.DoExtract(); //字符数
PHP排列组合算法
最近做的手游项目中说是需要排列组合的算法,我现在虽然做客户端了但是PHP还是比较熟悉的,于是就自己练练手试着写写看,出人意料的是原来PHP的数组函数用着如此方便,这么几行就搞定了,现在分享给大家,不足之处还望多多指教。
js交叉排列的组合算法
类似于染色体排列的数组组合算法。 [“a”,”b”,”c”]和[“x”,”z”]能排列出6种组合。
排列组合算法笔记
1.不存在重复字符的排列组合 如abc,此种情况很简单,算法代码也很少,主要思想为: 将abc分为前部和后部,前部为a,后部abc,用a与后部每一个字符交换,如aa得到abc,ab得到bac,ac得到cba,最终得到abc,bac,cba三部分针对上一部分中的三个后部,分别继续应用分两部,分别交换的方法,直到后部为NULL,递归输出字符串。 上述方法的递归代码如下: #
java排列组合算法
import java.util.ArrayList; import java.util.List; /** * 全排列组合算法 * @author mukeliang * 2009.10.21 */ public class TestComposite { public static void main(String[] args) { // List allList ...
排列组合算法(JAVA实现)
组合算法实现       从m个数里面取n个数的算法。最容易理解的就是递归,但是其效率太低。 实现方法一: // 组合算法 // 本程序的思路是开一个数组,其下标表示1到m个数,数组元素的值为1表示其下标 // 代表的数被选中,为0则没选中。 // 首先初始化,将数组前n个元素置1,表示第一个组合为前n个数。 // 然后从左到右扫描数组元素值的“10”组合,找到第一个“10”组合后将其变为 //...
排列组合算法怎样写
请问排列组合的算法怎样写?rn比如有"A","B","C",排列组合成六种可能的结果:rn"A","B","C" ; "A","C","B"rn"B","A","C" ; "B","C","A"rn"C","A","B" ; "C","B","A"rn以后会有"A","B","C","D"rn请问程序怎样写可以得出这些结果,谢谢!
排列组合算法求助
网上看的,题目是从连续的整数1~n中选取m个数字进行排列,排列规则如下:rn1、如果第i个位置的数字为x,则第i+1个位置的数字必须大于等于2x。rnrn问题:给出对应的n和m的值,问存在多少个排列方式?rnrn我想的算法我就不好意思说了,时间复杂度都O(n^m)了,问下有什么好的算法么?或者这有公式么?rnrnrn
可重复排列组合算法
如已经有0,1,2,3,4,e,a,s,d,f 10个字符!我想得到可重复排列组合及组合的数目!rn如下显示:rn0000000000rn0000000001rn.rn.rn.rn000000000frn1000000000rn.rn.rn.rnffffffffffrnrn有n个
征求排列组合算法
有N个任意数字 (1,23,21,87,...)rn排列出所有N个数字相加的可能,rn比如生成如下格式:rn1+23rn1+23+21rn1+23+21+87rn1+21+87rn1+87rn23+21rn23+21+87rn21+87rn.....rn
标准程序库中的排列组合算法
记得标准程序库中有一个排列组合算法,忘记了,不知道哪位高人知道!
java递归实现排列、组合算法
项目需要,特此记录 在这里插入代码片 package com.cooooode; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class Demo { public static void main(String[] args) { List&amp;amp;amp;lt;...
排列算法及组合算法(C++)
元素的排列算法算法分析(递归方式) 设R={r1 ,r2, r3,…….., rn}是要进行排列的n个元素,Ri=R-{ri}。集合X中的元素的全排列记为Perm(X)。(ri)Perm(X)表示全排列Perm(X)的每一个排列前加上前缀ri得到的排列。R的全排列可归纳定义如下: 当n=1时,Perm(R)=(r),其中r是集合R中唯一的元素; 当n>1时,Perm(R)由
排列组合算法(Java)
网上搜排列组合算法,搜索结果一堆,但极少能说清楚排列和组合的区别,算法也糊里糊涂糊弄人的居多。因为工作中有一个逻辑需要用到组合算法,花了小半天时间弄好了,记录在这里供有需要的人使用。先看定义排列组合:permutation and combinationcombination组合,表示字母为C,是无序的;从n个不痛的元素中取出m个元素并成一组,叫做从n个不同元素中取出m个元素的一个组合.表示为C(n
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法