Question

之前有人试过这个免费的过滤器吗？我真的不明白为什么这根本不起作用。 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>

Answer 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
});

希望有所帮助。

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

1 个答案: