Question

我无法尝试对动态创建的html表进行排序。我用玉/哈巴狗创造它。我正在尝试使用此处http://www.kryogenix.org/code/browser/sorttable/中的sorttable.js脚本。我仍然是html / javascript的新手。所以，如果有一些明显的原因，为什么它不工作，有人可以指出它？

以下是从模板

生成的一些html代码

<html>
  <head>
   <script src="/path/to/sorttable.js"></script>
   <style>
    th.clickable:hover
    {
     color:green
    }    
    th, td
    {
     padding:5px;
    }
    th.clickable
    {
     cursor: pointer;    
    }
  </style>
 </head>
 <body>
 <script>
  var newTableObject = document.getElementById(tbl)
  sorttable.makeSortable(newTableObject)
 </script>
 <table class="sortable" id="tbl">
  <tr>
   <th class="clickable">id</th>
   <th class="clickable">value</th>
  </tr>
  <tr>
  <td>100</td>
  <td>100</td>
 </tr>
  <tr>
  <td>200</td>
  <td>200</td>
 </tr> 
</table>
</body>
</html>

我的目标是拥有它，当我点击标题时，它按该列对表进行排序。

Answer 1

请原谅这是否已知......但是只要浏览器遇到脚本标记，脚本标记就会被读取并执行。您是否尝试过将脚本标记放在桌子后面？

Answer 2

代码执行时：

var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)

您的表格尚未呈现且无法使用。所以你;将undefined传递给sorttable.makeSortable方法。您可以在获得元素后添加trace语句来测试它：

var newTableObject = document.getElementById(tbl)
console.log(newTableObject)

您应该等待在表格渲染后触发此代码。像这样：

onLoad = function(){
    var newTableObject = document.getElementById(tbl)
    sorttable.makeSortable(newTableObject)
}

并声明如下：

// using jQ
$(document).ready( onLoad())

或普通JS

<body onload="onload()">

无法使用sorttable.js

2 个答案: