为什么我的handson表会复制自己?

时间:2015-05-14 04:49:07

标签: javascript jquery handsontable

我尝试实现handsontable,但我的表格重复了。我不明白为什么会这样。当我使用$('#example').handsontable方法时,它会重复。这是我的完整代码

<html>   
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="jquery.handsontable.full.css">
<link rel="canonical" href="http://handsontable.com/">
<link href="http://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css">
</head> 

<body> 

<div>
<div id="container" style="margin-top:100px;">
<div id="example" class="handsontable"> <table class="htCore" style="display: table;"><colgroup><col style="width: 50px;"><col style="width: 61px;"><col style="width: 50px;"><col style="width: 69px;"><col style="width: 50px;"><col style="width: 69px;"></colgroup><thead><tr><th><div class="relative"><span class="colHeader">A</span></div></th><th><div class="relative"><span class="colHeader">B</span></div></th><th><div class="relative"><span class="colHeader">C</span></div></th><th><div class="relative"><span class="colHeader">D</span></div></th><th><div class="relative"><span class="colHeader">E</span></div></th><th><div class="relative"><span class="colHeader">F</span></div></th></tr></thead><tbody><tr><td class=""></td><td class="">Maserati</td><td class="">Mazda</td><td class="">Mercedes</td><td class="">Mini</td><td class="">Mitsubishi</td></tr><tr><td class="">2009</td><td class="">0</td><td class="">2941</td><td class="">4303</td><td class="">354</td><td class="">ede</td></tr><tr><td class="">2010</td><td class="">5</td><td class="">2905</td><td class="">2867</td><td class="">412</td><td class="">5284</td></tr><tr><td class="">2011</td><td class="">4</td><td class="">2517</td><td class="">4822</td><td class="">552</td><td class="">6127</td></tr><tr><td class="">2012</td><td class="">2</td><td class="">2422</td><td class="">5399</td><td class="">776</td><td class="">4151</td></tr><tr><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr></tbody></table></div>  

    <script>
      var data = [
        ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
        ["2009", 0, 2941, 4303, 354, 5814],
        ["2010", 5, 2905, 2867, 412, 5284],
        ["2011", 4, 2517, 4822, 552, 6127],
        ["2012", 2, 2422, 5399, 776, 4151]
      ];

      $('#example').handsontable({
        data: data,
        minRows: 1,
        minCols: 6,
        maxCols: 6,
        minSpareRows: 1,
        autoWrapRow: true,
        colHeaders: true,
        contextMenu: true
      });

      $('.ver').html($('#example').data('handsontable').version); 


    </script>  
</div>
</div>
</body>
</html>

这是我看到的

enter image description here

2 个答案:

答案 0 :(得分:2)

看起来你已经在其中包含HTML表后附加到#example容器中,从而创建了第二个表。

答案 1 :(得分:2)

尝试删除var sensorType = { sender: { port: '', path: '' }, receiver: { path: '' } }; var sensors = [ { id: 'led', name: 'LED', type: sensorType.sender }, { id: 'temp', name: 'TEMP', type: sensorType.receiver }, ]; console.log(sensorType.sender); //Returns Object {port: "", path: ""} console.log(sensors); //[{ id: 'led', name: 'LED', type: { port: '', path: '' } },{ id: 'temp', name: 'TEMP', type: { path: '' } }];内的table。这段代码:

<div id="example" class="handsontable">

使用提供的数据创建表。然后在$('#example').handsontable({ data: data, minRows: 1, minCols: 6, maxCols: 6, minSpareRows: 1, autoWrapRow: true, colHeaders: true, contextMenu: true }); 内不需要表定义。