Sorttable.js（Javascript表格排序）在javascript中創建表格時不起作用

我試圖使用sorttable.js程序包在單擊列標題時使HTML表格可排序。我能得到這個工作得很好，當表在HTML中聲明靜態：Sorttable.js（Javascript表格排序）在javascript中創建表格時不起作用

<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的路表的錯誤？任何幫助，將不勝感激。謝謝！

來源

2016-06-28 CdSdw

首先有一個'thead'和'tbody'而第二個只有一個'tbody'另外，還要考慮表被排序方式 - 有一些js只運行並尋找class = sortable，並使其成爲一個可排序的表。隨着代碼的運行，您需要運行相同的初始化。 –

sorttable.js假設所有表格在初始化時都已經在HTML中;您的表格是動態生成的，因此您必須手動引導makeSortable方法。您console.log前

權，嘗試插入這樣的：

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

來源

2016-06-28 19:55:56 SteamDev

Sorttable.js（Javascript表格排序）在javascript中創建表格時不起作用

回答

相關問題