Question

我希望有人可以向我解释如何在我的网页上实现FloatThread JS表插件。

目前我有一个非常长的表，当向下滚动时会让人感到困惑 - 所以我决定尝试实现一个解决方案，将第一行（<th>标签）修复到表顶部向下滚动。

这是我的表格代码：

<div class="col-sm-12">  


            <div class="table-responsive"> 
            <table class="table table-bordered table-striped sortable">
            <thead>
                <tr>
                    <th width="3%"></th>
                    <th>FINISH NO.</th>
                    <th>COLOUR</th>
                    <th>PURITY</th>
                    <th>CARAT</th>
                    <th>PRICE US $</th>
                    <th>FLUO</th>
                    <th>CUT</th>
                    <th>SYM</th>
                    <th>POLISH</th>
                    <th>NATTS</th>
                    <th>GIRDIE</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>

我遇到了一个解决方案;在http://mkoryak.github.io/floatThead/并下载.zip并将jquery.floatThread.min.js和jquery.floatThread.js文件复制到我的/ js /文件夹中，将它们与jQuery一起包含在页面的标题中：

<script type="text/javascript" src="js/jquery.floatThead.min.js"></script>
<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

我尽我所能遵循用法示例并在我的表格上方添加了以下<script>：

<script>$('table.table-bordered.table-striped.sortable').floatThead({
scrollingTop: pageTop,
// I need this offset because I don't
// want the table header to overlap
//my site navigation (its a global function)
useAbsolutePositioning: false
// absolutePositioning is better for
// highly dynamic sites
// (which this is not)
});
</script>

但是当我重新加载页面时，表格的行为方式相同。你能看出我做错了什么/解释如何解决它以备将来参考吗？

作为参考，这是他们应该如何运作：

http://mkoryak.github.io/floatThead/#examples

谢谢！

实现JS FloatThread插件，修复表头

0 个答案: