效果
本文提供一种基于jquery的固定表格上表头和左表头的方法。运行效果如下：
思路
1、监听某个元素的滚动条事件
$(selector).scroll(function () {…})
2、获取滚动条滚动的距离
$(selector).scrollLeft()
$(selector).scrollTop()
3、根据滚动距离调整表头的相对位置
$(selector).css({“position”:“relative”,“left”:“…”,“z-index”:“…”});
$(selector).css({“position”:“relative”,“top”:“…”,“z-index”:“…”});
注：表头元素应采用相对位置。
实现
该功能的实现过程较为简单，主要由fixTableHead.html文件、fixTableHead.css文件和fixTableHead.js组成。具体代码如下：
1、fixTableHead.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定表格的上表头和左表头</title>
<link rel="stylesheet" href="./fixTableHead.css" type="text/css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="./fixTableHead.js" type="text/javascript"></script>
</head>
<body>
<div id="tableBox">
<table id="myTable">
<tr id="tableHeadTopTr">
<th id="trHead">
<div>序号</div>
</th>
<th class="tableHeadTop">
<div>姓名</div>
</th>
<th class="tableHeadTop">
<div>年龄</div>
</th>
<th class="tableHeadTop">
<div>班级</div>
</th>
<th class="tableHeadTop">
<div>语文</div>
</th>
<th class="tableHeadTop">
<div>数学</div>
</th>
<th class="tableHeadTop">
<div>英语</div>
</th>
<th class="tableHeadTop">
<div>物理</div>
</th>
<th class="tableHeadTop">
<div>化学</div>
</th>
<th class="tableHeadTop">
<div>生物</div>
</th>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>1</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>2</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>3</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>4</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>5</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>6</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tableTr">
<td class="tableHeadLeft">
<div>7</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
2、fixTableHead.css文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| #tableBox{
width: 600px;
height: 300px;
overflow-x: auto;
overflow-y: auto;
}
table{
border-spacing: unset;
}
#myTable{
background-color: white
}
table tr th, table tr td{
min-width: 100px;
height: 50px;
border: 1px solid lightgrey
}
#trHead{
background-color: lightcoral
}
.tableHeadTop{
background-color: aquamarine
}
.tableHeadLeft{
background-color: aquamarine
}
|
3、fixTableHead.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $(document).ready(function() {
$("#tableBox").scroll(function () {
$("#myTable tr").each(function () {
$(this).children().first().css({"position":"relative","left":$("#tableBox").scrollLeft(),"z-index":"2"});
});
$(".tableHeadTop").css({"position":"relative","top":$("#tableBox").scrollTop(),"z-index":"3"});
$("#trHead").css({"position":"relative","top":$("#tableBox").scrollTop(),"left":$("#tableBox").scrollLeft(),"z-index":"4"})
});
});
|
关注**“阿汤笔迹”** 微信公众号，获取更多学习笔记。
原文地址：http://www.atangbiji.com/2020/09/25/fixTableHead/
博主最新文章在个人博客 http://www.atangbiji.com/ 发布。
