Javascript 无法读取属性'；mData'；可编辑数据表中未定义错误的定义

我只想将jquery editable datatable与另外4行一起使用，但我看到了以下错误：无法读取未定义的属性“mData”

如果我放置了4个

和4个

数据表，效果很好，但是如果我放置了5个或更多

和

数据表，我得到无法读取未定义的属性“mData”

这是关于行数的？因为td count等于tr count

代码示例

有效

渲染引擎
浏览器
月台
行动
三叉戟
互联网
浏览器4.0
赢得95分+
数字减影

不要工作

渲染引擎
浏览器
月台
行动
**外行**
三叉戟
互联网
浏览器4.0
赢得95分+
**额外TD**

JS:

（函数（$）{
"严格使用",；
变量可编辑表={
选项：{
addButton:“#addToTable”，
表：“#数据表可编辑”，
对话框：{
包装器：“#对话框”，
取消按钮：“#对话框取消”，
确认按钮：“#对话框确认”，
}
},
初始化：函数（）{
这
.setVars（）
.build（）
.events（）；
},
setVars:function（）{
this.$table=$（this.options.table）；
this.$addButton=$（this.options.addButton）；
//对话
this.dialog={}；
this.dialog.$wrapper=$（this.options.dialog.wrapper）；
this.dialog.$cancel=$（this.options.dialog.cancel按钮）；
this.dialog.$confirm=$（this.options.dialog.confirButton）；
归还这个；
},
构建：函数（）{
this.datatable=this.$table.datatable({
“语言”：{
“十进制”：“，
“emptyTable”：“表中没有可用数据”，
“信息”：“显示总条目的开始到结束”，
“infoEmpty”：“显示0个条目中的0到0个”，
“infoFiltered:”（从_MAX_total entries中筛选），
“infoPostFix”：“，
“千”：“，”，
“长度菜单”：“显示菜单项”，
“加载记录”：“加载…”，
“处理”：“处理…”，
“搜索”：“搜索：”，
“zeroRecords”：“未找到匹配的记录”，
“分页”：{
“第一”：“第一”，
“last”：“last”，
“下一步”：“下一步”，
“以前的”：“以前的”
},
},
AO列：[
无效的
无效的
无效的
{“bSortable”：false}
]
});
window.dt=this.datatable；
归还这个；
},
事件：函数（）{
var _self=这个；
这是一张五美元的桌子
.on（'click'，'a.save-row'，函数（e）{
e、 预防默认值（）；
_self.rowSave（$（this.closest（'tr'））；
})
.on（'click'，'a.cancel-row'，函数（e）{
e、 预防默认值（）；
_self.rowCancel（$（this.closest（'tr'））；
})
.on（'click'，'a.edit-row'，函数（e）{
e、 预防默认值（）；
_self.rowEdit（$（this.closest（'tr'））；
})
.on（'click'、'a.remove-row'，函数（e）{
e、 预防默认值（）；
var$row=$（this）.closest（'tr'）；
$.magnificPopup.open({
项目：{
src:_self.options.dialog.wrapper，
键入：“内联”
},
预加载程序：false，
莫代尔：是的，
回调：{
更改：函数（）{
_self.dialog.$confirm.on（'click'，函数（e）{
e、 预防默认值（）；
_self.rowRemove（$row）；
$.magnificPopup.close（）；
});
},
关闭：函数（）{
_self.dialog.$confirm.off（'click'）；
}
}
});
});
此.addButton.on（'click'，函数（e）{
e、 预防默认值（）；
_self.rowAdd（）；
});
此.dialog.$cancel.on（'click'，函数（e）{
e、 预防默认值（）；
$.magnificPopup.close（）；
});
归还这个；
},
// ==========================================================================================
//行函数
// ==========================================================================================
行添加：函数（）{
这个.addButton.attr（{'disabled'：'disabled'}）；
风险价值行动，
数据，
$row；
行动=[
<table class="table table-striped" id="datatable-editable">
   <thead>
      <tr>
         <th>Rendering engine</th>
         <th>Browser</th>
         <th>Platform(s)</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet
            Explorer 4.0
         </td>
         <td>Win 95+</td>
         <td class="actions">
            <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
            <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
            <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
            <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
         </td>
         <td>dsa</td>
      </tr>
   </tbody>
</table>

<table class="table table-striped" id="datatable-editable">
   <thead>
      <tr>
         <th>Rendering engine</th>
         <th>Browser</th>
         <th>Platform(s)</th>
         <th>Actions</th>
         <th>**ExtraRow**</th>
      </tr>
   </thead>
   <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet
            Explorer 4.0
         </td>
         <td>Win 95+</td>
         <td class="actions">
            <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
            <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
            <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
            <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
         </td>
         <td>**Extra TD**</td>
      </tr>
   </tbody>
</table>

(function( $ ) {

    'use strict';

    var EditableTable = {

        options: {
            addButton: '#addToTable',
            table: '#datatable-editable',
            dialog: {
                wrapper: '#dialog',
                cancelButton: '#dialogCancel',
                confirmButton: '#dialogConfirm',
            }
        },

        initialize: function() {
            this
                .setVars()
                .build()
                .events();
        },

        setVars: function() {
            this.$table             = $( this.options.table );
            this.$addButton         = $( this.options.addButton );

            // dialog
            this.dialog             = {};
            this.dialog.$wrapper    = $( this.options.dialog.wrapper );
            this.dialog.$cancel     = $( this.options.dialog.cancelButton );
            this.dialog.$confirm    = $( this.options.dialog.confirmButton );

            return this;
        },

        build: function() {
            this.datatable = this.$table.DataTable({
                "language": {
                    "decimal":        "",
                    "emptyTable":     "No data available in table",
                    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty":      "Showing 0 to 0 of 0 entries",
                    "infoFiltered":   "(filtered from _MAX_ total entries)",
                    "infoPostFix":    "",
                    "thousands":      ",",
                    "lengthMenu":     "Show _MENU_ entries",
                    "loadingRecords": "Loading...",
                    "processing":     "Processing...",
                    "search":         "Search:",
                    "zeroRecords":    "No matching records found",
                    "paginate": {
                        "first":      "First",
                        "last":       "Last",
                        "next":       "Next",
                        "previous":   "Previous"
                    },
                },
                aoColumns: [
                    null,
                    null,
                    null,
                    { "bSortable": false }
                ]
            });

            window.dt = this.datatable;

            return this;
        },


        events: function() {
            var _self = this;

            this.$table
                .on('click', 'a.save-row', function( e ) {
                    e.preventDefault();

                    _self.rowSave( $(this).closest( 'tr' ) );
                })
                .on('click', 'a.cancel-row', function( e ) {
                    e.preventDefault();

                    _self.rowCancel( $(this).closest( 'tr' ) );
                })
                .on('click', 'a.edit-row', function( e ) {
                    e.preventDefault();

                    _self.rowEdit( $(this).closest( 'tr' ) );
                })
                .on( 'click', 'a.remove-row', function( e ) {
                    e.preventDefault();

                    var $row = $(this).closest( 'tr' );

                    $.magnificPopup.open({
                        items: {
                            src: _self.options.dialog.wrapper,
                            type: 'inline'
                        },
                        preloader: false,
                        modal: true,
                        callbacks: {
                            change: function() {
                                _self.dialog.$confirm.on( 'click', function( e ) {
                                    e.preventDefault();

                                    _self.rowRemove( $row );
                                    $.magnificPopup.close();
                                });
                            },
                            close: function() {
                                _self.dialog.$confirm.off( 'click' );
                            }
                        }
                    });
                });

            this.$addButton.on( 'click', function(e) {
                e.preventDefault();

                _self.rowAdd();
            });

            this.dialog.$cancel.on( 'click', function( e ) {
                e.preventDefault();
                $.magnificPopup.close();
            });

            return this;
        },

        // ==========================================================================================
        // ROW FUNCTIONS
        // ==========================================================================================
        rowAdd: function() {
            this.$addButton.attr({ 'disabled': 'disabled' });

            var actions,
                data,
                $row;

            actions = [
                '<a href="#" onclick="SaveItem();" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>',
                '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
                '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
                '<a href="#" onclick="RemoveItem();" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
            ].join(' ');

            data = this.datatable.row.add([ '', '', '', actions ]);
            $row = this.datatable.row( data[0] ).nodes().to$();

            $row
                .addClass( 'adding' )
                .find( 'td:last' )
                .addClass( 'actions' );

            this.rowEdit( $row );

            this.datatable.order([0,'asc']).draw(); // always show fields
        },

        rowCancel: function( $row ) {
            var _self = this,
                $actions,
                i,
                data;

            if ( $row.hasClass('adding') ) {
                this.rowRemove( $row );
            } else {

                data = this.datatable.row( $row.get(0) ).data();
                this.datatable.row( $row.get(0) ).data( data );

                $actions = $row.find('td.actions');
                if ( $actions.get(0) ) {
                    this.rowSetActionsDefault( $row );
                }

                this.datatable.draw();
            }
        },

        rowEdit: function( $row ) {
            var _self = this,
                data;

            data = this.datatable.row( $row.get(0) ).data();

            $row.children( 'td' ).each(function( i ) {
                var $this = $( this );

                if ( $this.hasClass('actions') ) {
                    _self.rowSetActionsEditing( $row );
                } else {
                    $this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
                }
            });
        },

        rowSave: function( $row ) {
            var _self     = this,
                $actions,
                values    = [];

            if ( $row.hasClass( 'adding' ) ) {
                this.$addButton.removeAttr( 'disabled' );
                $row.removeClass( 'adding' );
            }

            values = $row.find('td').map(function() {
                var $this = $(this);

                if ( $this.hasClass('actions') ) {
                    _self.rowSetActionsDefault( $row );
                    return _self.datatable.cell( this ).data();
                } else {
                    return $.trim( $this.find('input').val() );
                }
            });

            this.datatable.row( $row.get(0) ).data( values );

            $actions = $row.find('td.actions');
            if ( $actions.get(0) ) {
                this.rowSetActionsDefault( $row );
            }

            this.datatable.draw();
        },

        rowRemove: function( $row ) {
            if ( $row.hasClass('adding') ) {
                this.$addButton.removeAttr( 'disabled' );
            }

            this.datatable.row( $row.get(0) ).remove().draw();
        },

        rowSetActionsEditing: function( $row ) {
            $row.find( '.on-editing' ).removeClass( 'hidden' );
            $row.find( '.on-default' ).addClass( 'hidden' );
        },

        rowSetActionsDefault: function( $row ) {
            $row.find( '.on-editing' ).addClass( 'hidden' );
            $row.find( '.on-default' ).removeClass( 'hidden' );
        }

    };

    $(function() {
        EditableTable.initialize();
    });

}).apply( this, [ jQuery ]);

...
aoColumns: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...