商城动态生成table,修改基中一个值 ,其他数据不变

动态生成table,修改基中一个值 ,其他数据不变

公司要求根据商品生成动态表单,修改其中一个参数,其他数据不变,想了一天才解决这个问题，所以把方法写出来供大家查看，提供一个思路。

解决思路：保存表格已填充的数据,随着删除或者增加数据后根据获取类目数据,对比表格数据进行填充,重新渲染dom.

效果图 生成动态table.png

createTables();
function createTables(specLists,skuLists){
            var specList = [{"key":"颜色","value":[{"name":"黑色"},{"name":"红色"}]},{"key":"尺寸","value":[{"name":"1米"},{"name":"1.5米"}]}];
            var skuList = [{"tr":[{"td":"颜色"},{"td":"尺寸"},{"td":"库存"},{"td":"商家编码"}]},{"tr":[{"td":"黑色"},{"td":"1米"},{"td":"10"},{"td":"001"}]},{"tr":[{"td":"黑色"},{"td":"1.5米"},{"td":"15"},{"td":"150"}]},{"tr":[{"td":"白色"},{"td":"1米"},{"td":"10"},{"td":"10"}]},{"tr":[{"td":"白色"},{"td":"1.5米"},{"td":"15"},{"td":"15"}]}];
            var list = [];
            var thead = {
                    tr:[]
                };
            var tbody = [];
            for(var i = 0;i<specList.length;i++){
                thead.tr.push({"td":specList[i].key});
                if(tbody.length == 0){
                    for(var j = 0;j<specList[i].value.length;j++){
                        var tr = {
                        "tr":[{"td":specList[i].value[j].name}]
                        };
                        tbody.push(tr);
                    }
                }else{
                    var array = [];
                    var objArray = {};
                    for(var h = 0;h<tbody.length;h++){
                        for(var j = 0;j<specList[i].value.length;j++){
                            objArray.tr = tbody[h].tr.concat();
                            objArray.tr.push({"td":specList[i].value[j].name});
                            array.push({"tr":objArray.tr});
                        }
                    }
                    tbody = array;
                }
            }
            for(var a = 0;a < tbody.length;a++){
            if(skuList.length == 1 &&skuList[0].tr.length == 0){
            }else{
                // 只有一个规格时处理数据
                    if(tbody[a].tr.length == 1){
                        for(var c =0;c<skuList.length;c++){
                            if(tbody[a].tr[0].td == skuList[c].tr[0].td){
                                if(tbody[a].tr.length == 1){
                                    tbody[a].tr[1] = skuList[c].tr[skuList[c].tr.length-2];
                                    tbody[a].tr[2] = skuList[c].tr[skuList[c].tr.length-1];
                                }else if(tbody[a].tr.length == 2){
                                    tbody[a].tr[2] = skuList[c].tr[skuList[c].tr.length-2];
                                    tbody[a].tr[3] = skuList[c].tr[skuList[c].tr.length-1];
                                }
                            }
                        }
                    }else{
                        // 二个规格时处理数据
                        for(var b=0;b<tbody[a].tr.length;b++){
                            for(var e =0;e<skuList.length;e++){
                                if(tbody[a].tr[0].td == skuList[e].tr[0].td && tbody[a].tr[1].td == skuList[e].tr[1].td){
                                    if(tbody[a].tr.length == 1){
                                        tbody[a].tr[1] = skuList[e].tr[skuList[e].tr.length-2];
                                        tbody[a].tr[2] = skuList[e].tr[skuList[e].tr.length-1];
                                    }else if(tbody[a].tr.length == 2){
                                        tbody[a].tr[2] = skuList[e].tr[skuList[e].tr.length-2];
                                        tbody[a].tr[3] = skuList[e].tr[skuList[e].tr.length-1];
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // 没有匹配到的数组初始化值
            for(var m = 0; m<tbody.length;m++){
                if(tbody[m].tr.length == 1){
                    tbody[m].tr[1] = {"td":""};
                    tbody[m].tr[2] = {"td":""};
                }else if(tbody[m].tr.length == 2){
                    tbody[m].tr[2] = {"td":""};
                    tbody[m].tr[3] = {"td":""};
                }
            }
            thead.tr.push({"td":"库存"},{"td":"商家编码"});
            list.push(thead);
            list = list.concat(tbody);
            var theadDom = "";
            var tbodyDom = "";
            // 填充table headerDom部分
            for(var x = 0; x<list[0].tr.length;x++){
                theadDom += '<th>'+list[0].tr[x].td+'</th>';
            }
            // 填充table tbodyDom部分
            for(var y = 1; y<list.length;y++){
                tbodyDom += '<tr>';
                var tddom = "";
                if(list[y].tr.length == 3){
                    tbodyDom += '<td>'+list[y].tr[0].td+'</td>';
                }else{
                    tbodyDom += '<td>'+list[y].tr[0].td+'</td>'+'<td>'+list[y].tr[1].td+'</td>';
                }
                tbodyDom += '<td><input type="text" class="layui-input" name="'+Math.random()+'"  required maxlength="4" value="'+list[y].tr[list[y].tr.length-2].td+'"></td><td><input type="text" class="layui-input" name="'+Math.random()+'" maxlength="15" value="'+list[y].tr[list[y].tr.length-1].td+'"></td>';
                tbodyDom = tbodyDom+'</tr>';
            }
            var dom = '<table class="layui-table"><thead><tr>'+theadDom+'</tr></thead><tbody>'+tbodyDom+'</tbody></table>';
            $('.table').empty().append(dom);