avatar

目录
一种固定表格上表头和左表头的方法

效果

本文提供一种基于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文件

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文件

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文件

javascript
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/ 发布。

文章作者: ATang
文章链接: http://www.atangbiji.com/2020/09/25/fixTableHead/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 阿汤笔迹
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论