javascript - html 表格的 slider 功能

标签 javascript jquery html html-table slider

我有一个纯 html 表格,我需要使用 jQuery 应用排序和滑动功能。我已经使用 DataTable.js jQuery 库应用了排序。排序工作正常,但不知道如何将 slider 应用到表格,如下所示,使 slider 内的所有科目列以及学生姓名和总列固定

enter image description here

谁能告诉我这个问题的解决方案吗?

我的代码如下所示

<强> Working Demo

脚本

$(document).ready(function () {
    myTable= $('#myTable').dataTable({
            "bInfo": false,
            "bLengthChange": false,
            "bPaginate": false
    });
});

html

<table id="myTable" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Student</th>
            <th>Maths</th>
            <th>Physics</th>
            <th>Geography</th>
            <th>History</th>
            <th>English</th>
            <th>Computer</th>
            <th>Biology</th>
            <th>Chemistry</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jeffrey</td>
            <td>55</td>
            <td>22</td>
            <td>66</td>
            <td>32</td>
            <td>34</td>
            <td>56</td>
            <td>67</td>
            <td>85</td>
            <td>445</td>
        </tr>
        <tr>
            <td>Mathew</td>
            <td>32</td>
            <td>43</td>
            <td>45</td>
            <td>76</td>
            <td>78</td>
            <td>98</td>
            <td>87</td>
            <td>77</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Linson</td>
            <td>23</td>
            <td>87</td>
            <td>87</td>
            <td>98</td>
            <td>97</td>
            <td>86</td>
            <td>75</td>
            <td>75</td>
            <td>454</td>
        </tr>
        <tr>
            <td>Filson</td>
            <td>45</td>
            <td>76</td>
            <td>87</td>
            <td>77</td>
            <td>88</td>
            <td>55</td>
            <td>78</td>
            <td>98</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Felix</td>
            <td>87</td>
            <td>90</td>
            <td>90</td>
            <td>89</td>
            <td>97</td>
            <td>96</td>
            <td>70</td>
            <td>86</td>
            <td>565</td>
        </tr>
        <tr>
            <td>Akhil</td>
            <td>78</td>
            <td>98</td>
            <td>65</td>
            <td>65</td>
            <td>67</td>
            <td>56</td>
            <td>87</td>
            <td>90</td>
            <td>676</td>
        </tr>
        <tr>
            <td>Arjun</td>
            <td>67</td>
            <td>88</td>
            <td>77</td>
            <td>66</td>
            <td>55</td>
            <td>44</td>
            <td>45</td>
            <td>45</td>
            <td>788</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>57</td>
            <td>87</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
            <td>99</td>
            <td>77</td>
            <td>898</td>
        </tr>
    </tbody>
</table>

最佳答案

固定 header 插件可以帮助您解决此问题。您可以在 example here 中看到固定 header .

已更新 JSFiddle example

关于javascript - html 表格的 slider 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30451222/

相关文章:

javascript - 我想限制正则表达式中子域的数量

javascript - RequireJS + Backbone 没有 jQuery?

jquery - jqGrid clientArray

javascript - 记录创建的元素的内部文本

JQuery 数据表添加新行

javascript - 如何对ajaxterm(J) javascript心跳行为进行压力测试?

php - 计算最近城市的最有效方法(来自白名单)

javascript - 如何更改IE8中TextNode的textContent?

javascript 似乎在 Firefox 中反向使用时区

javascript - 如果在 mousedown 之后移动鼠标,则取消传入的 jQuery 单击事件