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中创建表格时不起作用

回答

相关问题