解决方案

Question

我正在尝试使用jQuery floatThead插件。看起来有些东西不见了。我仔细阅读了教程。任何人都可以帮助我。我附加一个JSFiddle。帮助感谢。

<div class="wrapper">

<table class="table demo1 table-bordered table-striped">
    <thead> <tr> <th><a href="#" id='demoHeader1'>Header 1</a></th>
        <th><a href="#" id='demoHeader2'>Header 2</a></th> <th><a href="#" id='demoHeader3'>Header...3</a></th> </tr> </thead>
    <tbody>
    <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr>
    <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr>
    <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr>
    <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr>
    <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr>
    <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr>
    <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr>
    <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td>
    </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr>
    <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr>
</table>

https://jsfiddle.net/otyy8svy/

Answer 1

整个问题是您没有将插件代码添加到演示中。这样您就会出现控制台错误$demo1.floatThead is not a function。

也许他们已经删除了他们在cloudflare上托管的代码。所以，也许这是你的问题。 https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.11/jquery.floatThead.js

解决方案

我已将plugin's official website中的代码添加到小提琴框中，但事情有效。

https://jsfiddle.net/psy8Lzpk/

所以，get the code并包含在托管到您自己的服务器中的floatThead.js文件中，将其链接到主js文件上方的页面并感到高兴。

使用jquery floatthead修复HTML标头。

1 个答案:

解决方案