使用jquery floatthead修复了HTML标头。

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到小提琴JS箱和东西的工作。

https://jsfiddle.net/psy8Lzpk/

所以，get the code，并包括到托管到自己的服务器floatThead.js文件，将其链接到页面上方的主要js文件和快乐。