javascript 污染

Question

最近在弄一个表格生成器,出现了一点坑爹的毛病.

点击新增一列的时候,标题新增一列,所有内容新增一列.点击新增一行时.内容新增一行跟标题一样的.以下是我的布局和js代码.

布局

<div class="table-warpper">
    <div class="title">
        <div>标题设置</div>
        <div><button type="button" class="cols">新增一列</button></div>
    </div>
    <div class="header">
        <form class="form-inline">
            
        </form>
    </div>
    <div class="title">
        <div>内容设置</div>
        <div><button type="button" class="rows">新增一行</button></div>
    </div>
    <div class="content">
        <form class="form-inline">
        <ul>
            
        </ul>
    </form>
    </div>
</div>

JS代码

var table = {
    'data':{
        'header':[],
        'item':[],
    },
    'max':5,
    'init':function(data,max){
        this.data = data;
        this.max = max;
        this.render();
    },
    'bindEvent':function(){
        $('.cols').off('click').on('click',function(){
            // 新增一列.
            table.addCols();
        });

        $('.rows').off('click').on('click',function(){
            // 新增一行.
            table.addRows();
        });
        // 保存用户的数据.
        $('.table-warpper input').off('blur').on('blur',function(){
            // 先判断是头还是内容.如果是头部,仅仅需要取一个就可以了.如果是头部的话,那就要取行和列.
            var flag = $(this).parents('.header').length > 0 ? 1 : 0,
                val  = this.value,
                cols = this.getAttribute('data-cols'),
                rows = $(this).attr('data-rows');
            if(flag){
                table.data.header[cols] = val;
            }else{
                table.data.item[rows][cols] = val;
            }
        });
    },
    // 添加一列.
    'addCols':function(){
        if(this.data.header.length >= this.max){
            // layer.msg('标题最多5列');
            return false;
        }

        // 先push一个空的过去.
        this.data.header.push('');

        for(var i=0,len = this.data.item.length;i<len;i++) {
            this.data.item[i].push('');
        }
        this.render();
    },
    // 添加一行.
    'addRows':function() {
        // 这个写死.
        if(this.data.item.length >= 20){
            // layer.msg('滚动最多20个');
            return false;
        }
        var header = this.data.header;
        // push一个header进去.
        this.data.item.push(header);
        this.render();
    },
    'render': function(){
        this.refreshHeader();
        this.refreshItem();
        this.bindEvent();
    },
    'refreshHeader': function() {
        var html = [];
        for (var key = 0,len = this.data.header.length; key < len; key++) {
            html.push([
            '<div class="form-group">',
                '<input type="text" class="form-control" data-cols="',key,'" value="',this.data.header[key],'" placeholder="请输入值">',
            '</div>'
            ].join(''))
        }
        $('.header').html([
            '<form class="form-inline">',
                html.join('')
            ,'</form>'
        ].join(''));
    },
    'refreshItem': function() {
        var html = [];
        for (var row = 0,len = this.data.item.length; row < len; row++) {
            var item = this.data.item[row],
                li = [];
            for (var col =0; col < item.length; col++) {
                li.push([
                '<div class="form-group">',
                    '<input type="text" data-rows="',row,'" data-cols="',col,'" class="form-control" value="',item[col],'" placeholder="请输入值">',
                '</div>'
                ].join(''));
            }
            html.push('<li>' + li.join('') + '</li>');
        }
        $('.content form ul').html(html.join(''));
    }
};

table.init({
    'header':['姓名','培训时间','报名时间'],
    'item':[
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前'],
        ['王小姐','82天','2小时前']
    ]
},5);

现在已有的问题时,当我点击内容设置新增一行到最大时.点击新增一列会出现错乱.效果如下

而不是我所预期的效果,预期效果为

所引入的cdn资源

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

问题,我的js是哪个地方被污染了.
可以复制以上代码直接执行.
如果是其他毛病,请跟我说明一下

Answer 1

因为添加一行时，新增行直接push的header对象，因此再新增列，会导致那些新增行也会重复变更；

        // addRows 的这一句
        var header = this.data.header;

        // 变更为下面的就好了,主要是不要直接传递对象，主要是引用类型数据的问题
        var header = [];
        for (var i = 0, len = this.data.header.length; i< len; i++){
            header.push(this.data.header[i]);
        }
        // 或者
        var header = JSON.parse(JSON.stringify(this.data.header));