商城动态生成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';
            }
            // 填充table tbodyDom部分
            for(var y = 1; y';
                }else{
                    tbodyDom += ''+list[y].tr[0].td+''+''+list[y].tr[1].td+'';
                }
                tbodyDom += '';
                tbodyDom = tbodyDom+'';
            }
            var dom = ''+theadDom+''+tbodyDom+'';
            $('.table').empty().append(dom);