title: Sorttable.js (Javascript table sorting) not working when table created in javascript
body: <p>I'm trying to use the <a href="http://www.kryogenix.org/code/browser/sorttable/" rel="nofollow">sorttable.js</a> package to make an HTML table sortable when the column header is clicked.  I can get this to work just fine when the table is declared statically in the HTML: </p>
  
  <p><a href="https://jsfiddle.net/48558kLd/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;table class="sortable" style="width:100%"&gt;
    &lt;tr&gt;
      &lt;th&gt;Firstname&lt;/th&gt;
      &lt;th&gt;Lastname&lt;/th&gt; 
      &lt;th&gt;Points&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Eve&lt;/td&gt;
      &lt;td&gt;Jackson&lt;/td&gt; 
      &lt;td&gt;94&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;Joe&lt;/td&gt;
      &lt;td&gt;Smith&lt;/td&gt; 
      &lt;td&gt;50&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;Abraham&lt;/td&gt;
      &lt;td&gt;Jones&lt;/td&gt; 
      &lt;td&gt;4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, when I create the table with javascript, the sorting functionality isn't there anymore, and I get error messages on the console: </p>
  
  <p><a href="https://jsfiddle.net/48558kLd/1/" rel="nofollow">fiddle</a></p>
  
  <pre><code>  tbl_array = new Array()
    tbl_array = [["Firstname","Lastname","Points"], ["Eve","Jackson","94"], ["Joe","Smith","50"], ["Abraham","Jones","4"]]
    var body = document.body,
          tbl = document.getElementById('summaryTable');
  
      // clear all rows on the table
      while(tbl.rows.length &gt; 0){
          tbl.deleteRow(0)
      }
      tbl.style.width  = '100px';
      tbl.style.border = '1px solid black';
  
      numRows = tbl_array.length
      numCols = tbl_array[0].length
  
      // insert each 2D array entry into a table cell
      for(var i = 0; i &lt; numRows; i++){
  
      // insert header
      if (i == 0){
          var header = tbl.createTBody();
          var row = header.insertRow();
              for (var j=0; j &lt; numCols; ++j){
              var cell = document.createElement('th')
              cell.appendChild(document.createTextNode(tbl_array[i][j]));
              cell.style.border='1px solid black';
              cell.style.fontWeight = "bold";
              row.appendChild(cell)
            }
      }
  
      else{
        var tr = tbl.insertRow();
        for(var j = 0; j &lt; numCols; j++){
            var td = tr.insertCell();
            td.appendChild(document.createTextNode(tbl_array[i][j]));
            td.style.border = '1px solid black';
        }
      }
      }
    console.log("tbl", tbl) 
  </code></pre>
  
  <p>The only thing I can think of is that I'm not formatting the table correctly with the javascript, but when I printed both tables to the console and examined their structures, they were basically the same:</p>
  
  <pre><code>&lt;table ...&gt;
      &lt;tbody&gt;
          &lt;tr ...&gt;
              &lt;th&gt;..&lt;/th&gt;
              &lt;th&gt;..&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;..&lt;/td&gt;
              &lt;td&gt;..&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Is my error in the way I'm creating the table with javascript? Any help would be appreciated. Thanks!</p>