制表符找不到与选择器匹配的元素

时间:2019-03-07 20:59:17

标签: tabulator

尝试使用第一个超级基本制表器,并遇到控制台错误“找不到与选择器匹配的元素”。我尝试了几个不同的示例,无法弄清楚我在做什么错。这是应该如何工作的?

<html>
<head><title>Test for tabulator</title>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script>
//define data
var tabledata = [
    {id:1, name:"Oli Bob", location:"United Kingdom", gender:"male", rating:1, col:"red", dob:"14/04/1984"},
    {id:2, name:"Mary May", location:"Germany", gender:"female", rating:2, col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", location:"France", gender:"female", rating:0, col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", location:"USA", gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", location:"Canada", gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", location:"Russia", gender:"male", rating:4, col:"red", dob:"12/05/1966"},
    {id:7, name:"Jamie Newhart", location:"India", gender:"male", rating:3, col:"green", dob:"14/05/1985"},
    {id:8, name:"Gemma Jane", location:"China", gender:"female", rating:0, col:"red", dob:"22/05/1982"},
    {id:9, name:"Emily Sykes", location:"South Korea", gender:"female", rating:1, col:"maroon", dob:"11/11/1970"},
    {id:10, name:"James Newman", location:"Japan", gender:"male", rating:5, col:"red", dob:"22/03/1998"},
];

//define table
var table = new Tabulator("#example-table", {
    data:tabledata,
    autoColumns:true,
});
</script>
</head>
<body>
<h1>test tabulator </h1>
<div id="example-table"></div>
</body>
</html>

有什么明显的我想念的东西吗?直接从示例中复制/粘贴。

1 个答案:

答案 0 :(得分:1)

是的,因为在您访问该元素时该元素不存在。在div之后移动您的JavaScript,它应该可以工作。或使用页面加载事件:

底部页面:

<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
            data:tabledata,
            autoColumns:true,
        });
</script>

页面加载:

window.addEventListener("load", function() {
    var table = new Tabulator("#example-table", {
        data:tabledata,
        autoColumns:true,
    });
},false);