这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文分享了利用 js+CSS+html 实现固定 table 的列头不动的实例代码。小编认为具有很好的参考价值,感兴趣的朋友可以看下
话不多说,跟这小编来一起看下吧
1、CSS
- <style type="text/css">
- #scroll_head {
- position: absolute;
- display: none;
- }
- </style>
2、Javascript
- <script type="text/javascript">
- //该函数在上面一个table数据加载完成后调用
- //把表头的宽度设置到会滚动的页头去
- var copyWidth = function() {
- var b = $('#data_tbody').prev().find('tr:last').find('th');
- var c = $('#scroll_head').find('tr:last').find('th');
- for (var i = 0; i < b.length; i++) {
- var newWith = b.eq(i).width();
- if ($.browser.msie) {
- newWith += 1;
- }
- c.eq(i).width(newWith);
- }
- }
- $(function() {
- $(window).scroll(function() {
- if ($('#data_tbody').length > 0) {
- var thead = $('#data_tbody').prev();
- var thOffset = thead.offset();
- var scTop = $(window).scrollTop(); //滚动条相对top的位置
- if (scTop > thOffset.top) { //滚动条滚到thead及以下的位置,用临时的thead代替显示
- $('#scroll_head').css('display', 'block');
- $('#scroll_head').offset({
- top: scTop,
- left: thOffset.left
- });
- } else { //滚动条滚到thead上的位置,用table的原始thead显示
- $('#scroll_head').css('display', 'none');
- }
- }
- });
- });
- </script>
3、Html 内容
- <div id="data_div">
- <table>
- @*thead内容及样式同scroll_head中的thead*@ @*thead使用深背景色,避免滚动时和tbody内容重叠显示*@
- <thead>
- <tr>
- @*一级标题*@
- <th class="tt1" colspan="2">
- 一级1
- </th>
- <th class="tt2" colspan="5">
- 一级2
- </th>
- <th class="tt3" colspan="6">
- 一级3
- </th>
- </tr>
- <tr>
- @*二级标题*@
- <th style="width: 23px;">
- 二级11
- </th>
- <th style="width: 36px;">
- 二级12
- </th>
- <th class="tt" style="width: 40px;">
- 二级21
- </th>
- <th class="tt" style="width: 30px;">
- 二级22
- </th>
- <th class="tt" style="width: 30px;">
- 二级23
- </th>
- <th class="tt" style="width: 30px;">
- 二级23
- </th>
- <th class="tt" style="width: 30px;">
- 二级24
- </th>
- <th class="tt" style="width: 30px;">
- 二级25
- </th>
- <th class="tt" style="width: 30px;">
- 二级31
- </th>
- <th class="tt" style="width: 30px;">
- 二级32
- </th>
- <th class="tt" style="width: 30px;">
- 二级33
- </th>
- <th class="tt" style="width: 30px;">
- 二级33
- </th>
- <th class="tt" style="width: 30px;">
- 二级34
- </th>
- <th class="tt" style="width: 30px;">
- 二级35
- </th>
- <th class="tt" style="width: 30px;">
- 二级36
- </th>
- </tr>
- </thead>
- <tbody id="data_tbody">
- 数据内容,在数据加载完成后调用copyWidth()函数解决兼容性
- </tbody>
- </table>
- </div>
- <div id="scroll_head" style="display:block; top: 168px; left: 0px; position: relative;">
- <table width="100%">
- <thead>
- @*thead使用深背景色,避免滚动时和tbody内容重叠显示*@
- <tr>
- @*一级标题*@
- <th class="tt1" colspan="2">
- 一级1
- </th>
- <th class="tt2" colspan="5">
- 一级2
- </th>
- <th class="tt3" colspan="6">
- 一级3
- </th>
- </tr>
- <tr>
- @*二级标题*@
- <th style="width: 23px;">
- 二级11
- </th>
- <th style="width: 36px;">
- 二级12
- </th>
- <th class="tt" style="width: 40px;">
- 二级21
- </th>
- <th class="tt" style="width: 30px;">
- 二级22
- </th>
- <th class="tt" style="width: 30px;">
- 二级23
- </th>
- <th class="tt" style="width: 30px;">
- 二级23
- </th>
- <th class="tt" style="width: 30px;">
- 二级24
- </th>
- <th class="tt" style="width: 30px;">
- 二级25
- </th>
- <th class="tt" style="width: 30px;">
- 二级31
- </th>
- <th class="tt" style="width: 30px;">
- 二级32
- </th>
- <th class="tt" style="width: 30px;">
- 二级33
- </th>
- <th class="tt" style="width: 30px;">
- 二级33
- </th>
- <th class="tt" style="width: 30px;">
- 二级34
- </th>
- <th class="tt" style="width: 30px;">
- 二级35
- </th>
- <th class="tt" style="width: 30px;">
- 二级36
- </th>
- </tr>
- </thead>
- </table>
- </div>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0516/329744.html