Search code examples
javascriptjqueryhandsontable

Why does my handson table duplicate itself?

I tried implementing the handsontable , but my table got duplicated. I don't understand why this happens. It gets duplicated when I use the $('#example').handsontable method. Here is my full code 

<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>

Here is what I see

enter image description here

Solution

  • Try remove table inside <div id="example" class="handsontable">. This code :

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

    create the table using the data provided. Then no need for table definition inside <div id="example" class="handsontable">.