JavaScriptがテーブル作成時にSorttable.js（Javascriptテーブルソート）が機能しない

Question

sorttable.jsパッケージを使用して、列ヘッダーをクリックしたときにHTMLテーブルをソート可能にしようとしています。テーブルがHTMLで静的に宣言されたとき、私はこれがうまく動作するように取得することができます。

fiddle

<table class="sortable" style="width:100%"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Points</th> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
    <tr> 
    <td>Joe</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Abraham</td> 
    <td>Jones</td> 
    <td>4</td> 
    </tr> 
</table> 

をしかし、私はJavaScriptを使用してテーブルを作成するときに、ソート機能はもはや存在しない、と私は、コンソールにエラーメッセージが出ます：

fiddle

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 > 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 < numRows; i++){ 

    // insert header 
    if (i == 0){ 
     var header = tbl.createTBody(); 
     var row = header.insertRow(); 
      for (var j=0; j < 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 < numCols; j++){ 
      var td = tr.insertCell(); 
      td.appendChild(document.createTextNode(tbl_array[i][j])); 
      td.style.border = '1px solid black'; 
     } 
    } 
    } 
    console.log("tbl", tbl) 

私は考えることができる唯一のことは、私はないよということですJavaScriptで正しく表の書式が、私はコンソールに両方のテーブルを印刷し、その構造を調べたとき、彼らは基本的に同じであった：

<table ...> 
    <tbody> 
     <tr ...> 
      <th>..</th> 
      <th>..</th> 
     </tr> 
     <tr> 
      <td>..</td> 
      <td>..</td> 
     </tr> 
    </tbody> 
</table> 

は、私はJavaScriptを使用してテーブルを作成しています方法で、私の誤りですか？どんな助けもありがとう。ありがとう！

Answer 1

sorttable.js初期化時に、すべてのテーブルがすでにHTML内にあることを前提としています。テーブルが動的に生成されるので、手動でmakeSortableメソッドをブートストラップする必要があります。

右あなたのconsole.log前に、これを挿入してみてください：

sorttable.makeSortable(document.getElementById('summaryTable'));