为什么我的handson表会重复自己？答案

【问题标题】：Why does my handson table duplicate itself?为什么我的handson表会重复自己？
【发布时间】：2015-05-14 12:56:50
【问题描述】：

我尝试实现 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>

这是我看到的

【问题讨论】：

标签： javascript jquery handsontable

【解决方案1】：

尝试删除<div id="example" class="handsontable"> 中的table。这段代码：

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

使用提供的数据创建表。则无需在<div id="example" class="handsontable"> 中定义表。

【讨论】：

没错。仅供参考，您永远不应该在用于 HOT 实例的 div 内定义任何内容。这个想法是 HOT 本身将生成显示表格所需的 HTML。如果您先定义它，然后让脚本使用相同的 div，它将生成两次。更糟糕的是，每次修改表格时，它可能还会重复工作并做两倍的工作。

【解决方案2】：

看起来您在#example 容器中已经包含 HTML 表格后追加到其中，因此创建了第二个表格。

【讨论】：