在 javascript 中创建表时，Sorttable.js（Javascript 表排序）不起作用答案

【问题标题】：Sorttable.js (Javascript table sorting) not working when table created in javascript在 javascript 中创建表时，Sorttable.js（Javascript 表排序）不起作用
【发布时间】：2016-06-28 19:47:58
【问题描述】：

我正在尝试使用 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 创建表格的方式上是否有错误？任何帮助，将不胜感激。谢谢！

【问题讨论】：

第一个有一个thead 和tbody，而第二个只有一个tbody 另外，考虑一下表格是如何排序的——只有一些js 运行并查找 class=sortable 和使它成为一个可排序的表。当您的代码在此之后运行时，您需要运行相同的初始化。

标签： javascript html html-table sorttable.js

【解决方案1】：

sorttable.js 在初始化时假定所有表都已经在 HTML 中；您的表格是动态生成的，因此您必须手动引导 makeSortable 方法。

在您的 console.log 之前，尝试插入：

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

【讨论】：