JS实现的表头列头固定页面功能示例

本文实例讲述了JS实现的表头列头固定页面功能。分享给大家供大家参考，具体如下：

这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft.

一.js中scrollTop及scrollLeft的使用说明

scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。例如:外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。

scrollLeft同上.

二.页面示例

页面示例代码如下:

    
 序号
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
 
 
 
 
标题A
标题B
标题C
标题D
标题E
标题F
 
 
 
1
1
1
1
1
1
 
2
2
2
2
2
2
 
3
3
3
3
3
3
 
4
4
4
4
4
4
 
5
5
5
5
5
5
 
6
6
6
6
6
6
 
7
7
7
7
7
7
 
8
8
8
8
8
8
 
9
9
9
9
9
9
 
10
10
10
10
10
10

效果图如下:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript表单(form)操作技巧大全》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。