原生JS自动批量生成商品属性及价格

浏览：544次- 评论：0次- 发布时间：2017-09-12

Html

Css

/* 传入的JSON格式数据 */
var goodsTypeData = {
    "颜色": ["红色", "绿色", "黄色", "蓝色"],
    "尺码": ["S", "M", "L"],
    "布料": ["蚕丝", "纯棉", "羽绒"],
    "产地": ["广州", "浙江", "绵阳"]
};

/* 提交数据 */
function submit() {
    var result = [];
    var th = document.querySelectorAll('th');
    var thName = [];
    th.forEach(function(e) {
        thName.push(e.innerText);
    })
    var tr = document.querySelectorAll('tr');
    for (var i = 1, len = tr.length; i < len; i++) {
        var td = tr[i].children;
        var jsonStr = "{";
        for (var j = 0, length = td.length; j < length; j++) {

if (j < th.length - 3) {
                jsonStr += '"' + thName[j] + '":"' + td[j].innerText + '",'
            } else {
                jsonStr += '"' + thName[j] + '":"' + td[j].children[0].value + '",'
            }

}
        jsonStr = jsonStr.substr(0, jsonStr.length - 1)
        jsonStr += "}"
        result.push(JSON.parse(jsonStr))
    }

console.log(result)
}

var subData = {};
var showData = [];
var goodsType = document.querySelector(".goodsType");
var goodTypeStr = "";
renderType();

/* 把类型数据渲染出来 */
function renderType() {
    for (var e in goodsTypeData) {
        var str = "<b>" + e + ": </b>";
        for (var i = 0, len = goodsTypeData[e].length; i < len; i++) {
            str += "<button onclick=select(this,'" + e + "','" + goodsTypeData[e][i] + "')>" + goodsTypeData[e][i] + "</button>"
        }
        goodsType.innerHTML += "<div class='goodsTypeItem'>" + str + "</div>";
    }
}

//点击商品类型效果
function select(ele, e, val) {
    if (ele.className == "") {
        ele.className = "active";
        typeAdd(e, val);
    } else if (ele.className == "active") {
        ele.className = "";
        typeDel(e, val);
    }
}

//增加一个类别
function typeAdd(e, val) {
    var exist = false;
    for (var type in subData) {
        if (type == e) {
            exist = true;
            subData[type].push(val);
        }
    }
    if (exist == false) {
        subData[e] = [];
        subData[e].push(val);
    }
    renders(subData)
}

//删除一个类别
function typeDel(e, val) {
    for (var type in subData) {
        if (type == e) {
            for (var i = 0, len = subData[type].length; i < len; i++) {
                if (subData[type][i] == val) {
                    subData[type].splice(i, 1)
                }
            }
        }
    }
    renders(subData)
}

//根据最终数据, 渲染页面
function renders(data) {
    showData = [];
    /* 排序, 类型少的在前 */
    var sort = [];
    for (var key in data) {
        if (data[key].length != 0) {
            sort.push(data[key].length)
        }
    }
    sort.sort();
    var length = sort.length;
    for (var i = 0; i < length; i++) {
        for (var key in data) {
            if (data[key].length == sort[0]) {
                var obj = {};
                obj.key = key;
                obj.val = data[key];
                showData.push(obj)
                sort.shift();
            }
        }
    }

/* 排序结束 */
    var nums = 1;
    for (var key in data) {
        nums = data[key].length * nums;
    }

var th = "<tr>";
    var showArr = [];
    for (var i = 0, len = showData.length; i < len; i++) {
        th += "<th>" + showData[i].key + "</th>";
        showArr.push(showData[i].val);
    }
    th += "<th>价格</th><th>数量</th><th>SKU</th> </tr>";

/* 将商品转换为dom节点 */
    for (var i = 0, len = showData.length; i < len; i++) {
        var data = showData[i].val;
        showData[i].dom = [];
        for (var j = 0, length = data.length; j < length; j++) {
            var str = "<td >" + data[j] + "</td>";
            showData[i].dom.push(str);
        }
    }

/* 将dom元素一一合并 */
    var doms = showData[0].dom;
    for (var i = 1, len = showData.length; i < len; i++) {
        doms = matching(doms, showData[i].dom)
    }

var tbody = "";
    for (var i = 0, len = doms.length; i < len; i++) {
        var str = "<tr>" + doms[i] + "<td><input type='number' /></td><td><input type='number' /></td><td><input type='text' /></td>" + "</tr>";
        tbody += str;
    }

var goodsLists = document.querySelector(".goodsLists");
    goodsLists.innerHTML = th + tbody;

}

//将两个数组内的每个元素一一匹配 (数组元素为字符串)
function matching(arr1, arr2) {
    var arr = [];
    for (var i = 0, len = arr1.length; i < len; i++) {
        for (var j = 0, length = arr2.length; j < length; j++) {
            var str = arr1[i] + arr2[j];
            arr.push(str);
        }
    }
    return arr;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：可以根据点击不同的商品属性自动生成可以输入价格数量sku等信息的表格框

1. 将可选的商品类型以json对象形式传入, 即: goodsTypeData

var goodsTypeData = {
    "颜色":["红色","绿色","黄色","蓝色"],
    "尺码":["S","M","L"],
    "布料":["蚕丝","纯棉","羽绒"],
    "产地":["广州","浙江","绵阳"]
};

2. 输入相关信息后, 点击提交即可在submit()函数内获得最终结果: result

3. 通过post请求提交 result 即可

4. 后续会增加商品属性外的可选项目, 目前只支持价格 | 数量 | SKU

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取