HTML 表格过滤器生成器不起作用答案

【问题标题】：HTML Table Filter Generator doesnt workHTML 表格过滤器生成器不起作用
【发布时间】：2014-02-12 13:41:32
【问题描述】：

以前有人试用过这个免费的过滤器生成器吗？我真的不明白为什么这根本不起作用。 JS文件在正确的目录中。我完全按照示例进行了操作，但过滤器根本没有显示。有什么线索吗？这是工具的链接http://tablefilter.free.fr/

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"></script>  
    <script language="javascript" type="text/javascript">            
    var tf = setFilterGrid("table1");
    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>



<table id="table1" cellspacing="0" class="mytable filterable" >  
    <caption>WORLD INTERNET USAGE AND POPULATION STATISTICS</caption>
    <tr>
        <th>World Regions</th>
        <th>Population ( 2007 Est.)</th>
        <th>Population % of World</th>
        <th>% Population ( Penetration )</th>
        <th>Usage % of World</th>
    </tr>
    <tr>
        <td>Africa</td>
        <td>933,448,292</td>
        <td>14.2 %</td>
        <td>3.5 %</td>
        <td>3.0 %</td>
    </tr>
    <tr>
        <td>Asia</td>
        <td>3,712,527,624</td>
        <td>56.5 %</td>
        <td>10.5 %</td>
        <td>35.6 %</td>
    </tr>
    <tr>
        <td>Europe</td>
        <td>809,624,686</td>
        <td>12.3 %</td>
        <td>38.6 %</td>
        <td>28.6 %</td>
    </tr>
    <tr>
        <td>Middle East</td>
        <td>193,452,727</td>
        <td>2.9 %</td>
        <td>10.0 %</td>
        <td>1.8 %</td>
    </tr>
    <tr>
        <td>North America</td>
        <td>334,538,018</td>
        <td>5.1 %</td>
        <td>69.4 %</td>
        <td>21.2 %</td>
    </tr>
    <tr>
        <td>Latin America / Caribbean</td>
        <td>556,606,627</td>
        <td>8.5 %</td>
        <td>16.0 %</td>
        <td>8.1 %</td>
    </tr>
    <tr>
        <td>Oceania / Australia</td>
        <td>34,468,443</td>
        <td>0.5 %</td>
        <td>53.5 %</td>
        <td>1.7 %</td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

将你的脚本标签移动到</body>的正上方，这样它就可以读取<script language="javascript" type="text/javascript">var tf = setFilterGrid("table1");</script></body>
还是一样。只是表出现了。没有过滤器。
它有效！我不知道JS是如何放置的。在网站上，它说把它放在头部。
脚本必须等待 DOM 加载。另一种方法是在 body 元素中添加一个 onload 监听器。
我已添加我的评论作为答案。

标签： javascript html filter html-table

【解决方案1】：

将您的脚本标签移动到 </body> 的正上方，以便它读取

  <script language="javascript" type="text/javascript">
    var tf = setFilterGrid("table1");
  </script>
</body>

这是因为需要加载 DOM/页面元素，以便脚本可以处理。

替代方法是将<script> 标记保留在原处，但将onload 侦听器放置到body。如果您阅读代码，您可能会看到如下内容：

<body onload="init()">

这表示函数init 应该在<body>（以及它包含的元素）加载后执行。所以你可能有这样的东西：

<script language="javascript" type="text/javascript">
  function init() {
    var tf = setFilterGrid("table1");
  }
</script>

如果您要使用 jQuery，则可以通过添加ready listener to document 来检查 DOM 是否已加载来解决此问题：

要么...

jQuery(document).ready(function () {
  // your code here
});

...或其快捷方式：

jQuery(function () {
  // your code here
});

希望对您有所帮助。

【讨论】：