在初始化 HandsOntable 时摆脱 TypeError

Question

我正在检查Handsontable for developers 我的一个项目。我试图按照他们的教程初始化一个可动手做的对象。但我不断收到 TypeError。

我的代码在下面-

var data = [
   ["","Ford","Volvo","Toyota","Honda"],
   ["2016", 10, 11, 12, 13],
   ["2017", 20, 11, 14, 13],
   ["2018", 30, 15, 12, 13]
];

var container = $("#example");
var hot = new Handsontable(container, {
   data: data,
   rowHeaders: true,
   colHeaders: true
});

<link href="http://docs.handsontable.com/0.25.0/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"/>
<script src="http://docs.handsontable.com/0.25.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

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

演示 - https://jsfiddle.net/x1w95ndx/

过去一小时我一直在努力寻找解决方案。如果有人告诉我正确的方向，这对我真的很有帮助。

Answer 1

问题是您将jQuery collection（一个类似数组的对象，它可以包含多个元素并提供像.css 和.attr 这样的jQuery 方法）传递给Handsontable 构造函数，而它需要一个普通的DOM 元素。

替换：

var container = $("#example");

与：

var container = $("#example")[0];

或者：

var container = document.getElementById("example");

工作示例：

var data = [
   ["","Ford","Volvo","Toyota","Honda"],
   ["2016", 10, 11, 12, 13],
   ["2017", 20, 11, 14, 13],
   ["2018", 30, 15, 12, 13]
];

var container = $("#example")[0];
var hot = new Handsontable(container, {
   data: data,
   rowHeaders: true,
   colHeaders: true
});

<link href="http://docs.handsontable.com/0.25.0/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"/>
<script src="http://docs.handsontable.com/0.25.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

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