最近在弄一個表格生成器,出現(xiàn)了一點坑爹的毛病.

點擊新增一列的時候,標題新增一列,所有內(nèi)容新增一列.點擊新增一行時.內(nèi)容新增一行跟標題一樣的.以下是我的布局和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>內(nèi)容設置</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();
        });
        // 保存用戶的數(shù)據(jù).
        $('.table-warpper input').off('blur').on('blur',function(){
            // 先判斷是頭還是內(nèi)容.如果是頭部,僅僅需要取一個就可以了.如果是頭部的話,那就要取行和列.
            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);

現(xiàn)在已有的問題時,當我點擊內(nèi)容設置新增一行到最大時.點擊新增一列會出現(xiàn)錯亂.效果如下

而不是我所預期的效果,預期效果為

所引入的cdn資源

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

問題,我的js是哪個地方被污染了.
可以復制以上代碼直接執(zhí)行.
如果是其他毛病,請跟我說明一下