javascript - 在同一页面中使用自定义标题加载多个handontable

我必须在具有同一个标题分组功能的自定义标题中在同一个页面中加载多个handontable。

我使用以下代码初始化具有不同组标题的两个handsontable-

$(document).ready(function() {

  /* function */

  function model(ldo, scn, line, container, f_e, fcl_lcl, spod, pod, iso, commodity, wgt, imdg, unno, temp, or, oog, stow_ind, ts, pol, shipper, bkg_ref, awk_cargo, remark) {
    return {
      name: {
        ldo: ldo,
        scn: scn,
        line: line,
        container: container,
        f_e: f_e,
        fcl_lcl: fcl_lcl,
        spod: spod,
        pod: pod,
        iso: iso,
        commodity: commodity,
        wgt: wgt,
        imdg: imdg,
        unno: unno,
        temp: temp,
        or: or,
        oog: oog,
        stow_ind: stow_ind,
        ts: ts,
        pol: pol,
        shipper: shipper,
        bkg_ref: bkg_ref,
        awk_cargo: awk_cargo,
        remark: remark
      }
    };
  }

  /* ------  */

  /* Events */
  var container_sizes = ['20-HC', '40-GP'];
  var container_count = [3, 5]
    //Loading excel sheet
  for (var i = 0; i < container_sizes.length; i++) {
    var data = [];
    for (var j = 0; j < container_count[i]; j++) {
      var row_data = model("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
      data.push(row_data);
    }
    var header_string = container_sizes[i] + ' sized containers';
    var container = $("#container-entry");
    container.handsontable({
      data: data,
      dataSchema: model,
      colHeaders: ["LDO", "SCN", "LINE", "CONTAINER", "F/E", "FCL/LCL", "SPOD", "POD", "ISO", "COMMODITY", "WGT", "IMDG", "UNNO", "TEMP", "OR", "OOG", "STOW IND.", "TS", "POL", "SHIPPER", "BKG REF", "AWK CARGO", "REMARK"],
      rowHeaders: true,
      manualColumnResize: true,
      columns: [{
        data: 'name.ldo'
      }, {
        data: 'name.scn'
      }, {
        data: 'name.line'
      }, {
        data: 'name.container'
      }, {
        data: 'name.f_e'
      }, {
        data: 'name.fcl_lcl'
      }, {
        data: 'name.spod'
      }, {
        data: 'name.pod'
      }, {
        data: 'name.iso'
      }, {
        data: 'name.commodity'
      }, {
        data: 'name.wgt'
      }, {
        data: 'name.imdg'
      }, {
        data: 'name.unno'
      }, {
        data: 'name.temp'
      }, {
        data: 'name.or'
      }, {
        data: 'name.oog'
      }, {
        data: 'name.stow_ind'
      }, {
        data: 'name.ts'
      }, {
        data: 'name.pol'
      }, {
        data: 'name.shipper'
      }, {
        data: 'name.bkg_ref'
      }, {
        data: 'name.awk_cargo'
      }, {
        data: 'name.remark'
      }],
      afterRender: function() {
        container.find('thead').find('tr').before(
          '<tr id="header-grouping"><th colspan="24">' + header_string + '</th></tr>');
      },
      beforeRender: function() {
        $('#header-grouping').remove();
      },
      stretchH: "all"
    });

  }

});

button#upload {
  position: relative;
  float: right;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-right: 75px;
}
button#reset {
  position: relative;
  float: left;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-left: 75px;
}

<h4>Copy and paste container related data</h4>


<div id='container-entry'></div>

<button type="reset" id="reset" class="btn btn-default btn-file btn-sm">
  Reset
</button>
<button type="submit" id="upload" class="btn btn-primary btn-file btn-sm">
  Upload
</button>

但是，当我运行代码或加载页面时，我一直在连续获取以下错误。

 TypeError: element.classList is undefined

错误回溯到handsontable js的以下行（9782行）。

return element.classList.contains(className);

我无法理解错误的原因。如果有人跟随我朝正确的方向前进，这对我会有所帮助。

这是一个演示-https://jsfiddle.net/ni8mr/x1bnuqjy/

最佳答案

我找到了解决方案。该问题是由于在同一div上添加两个handonTable引起的。所以我在默认div之后添加了另一个div，然后解决了问题。

我的问题中的代码有点混乱。所以我在这里演示了一个简单的演示-https://jsfiddle.net/ni8mr/2a0k4ror/

这是代码-

$(document).ready(function() {

  var $container = $("#example");
  $container.handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $container.find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });

  $("<div id='example1'></div>").insertAfter("div#example");
  $("#example1").handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $("#example1").find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });


});

<div id="example"></div>

这也是一个按照我的确切代码的演示-https://jsfiddle.net/ni8mr/2a0k4ror/1/