我有一个纯 html 表格,我需要使用 jQuery 应用排序和滑动功能。我已经使用 DataTable.js jQuery 库应用了排序。排序工作正常,但不知道如何将 slider 应用到表格,如下所示,使 slider 内的所有科目列以及学生姓名和总列固定
谁能告诉我这个问题的解决方案吗?
我的代码如下所示
<强> 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/