html固定表头

た入场券 2022-07-12 06:25 214阅读 0赞

<style>  
        .fixedHead \{  
            top: 0;  
            position: fixed;  
            display: flex;  
            background-color: \#cfe7ed;  
        \}  
        .fixedHead2 \{  
            top: 30px;  
            position: fixed;  
            display: flex;  
            background-color: \#cfe7ed;  
        \}  
    </style>  
    <script>  
        $(document).ready(function () \{  
            var tr = $('tbody>tr:first');  
            var trtwo = $('th\[colspan\]');  
            if (tr != undefined && tr != null && tr.length > 0) \{  
                var newhead = tr.clone();  
                var newhead2 = $('table').clone();  
                newhead2.find('tr:gt(1)').remove();  
                var tr\_top = tr.offset().top;  
                if (trtwo != undefined && trtwo.length > 0) \{  
                    $(document).scroll(function () \{  
                         
                        if ($(window).scrollTop() > tr\_top) \{  
                            
                            $('table').before(newhead2);  
                            newhead2.addClass('fixedHead');  
                             
                            var tds = $('tbody:eq(1)>tr:eq(2) td');  
                            var header = newhead2.find('tr:eq(1)').find('th');  
                            var colgap=tds.length-header.length ;//列的差额  
                            if (colgap>0) \{//得到合并单元格数量                     
                                newhead2.find('tr:eq(0)').find('th').each(function (i, e) \{  
                                    if (i <= colgap) \{  
                                        $(e).attr('width', tds.eq(i).width());  
                                    \}  
                                \});  
                            \};  
                            newhead2.find('tr:eq(1)').find('th').each(function (i, e) \{  
                                $(e).attr('width', tds.eq(i + colgap).width());  
                            \});  
                              
                            console.log('tds length is ' + tds.length);  
                            console.log('header is ' + newhead2.find('tr:eq(1)').find('th').length);  
                        \} else \{  
                            newhead2.remove();  
                        \}  
                    \})  
                \} else \{  
                    $(document).scroll(function () \{  
  
  
                        if ($(window).scrollTop() > tr\_top) \{  
                            tr.parent().append(newhead);  
                            newhead.addClass('fixedHead');  
                            var tds = $('tbody>tr:eq(1) td');  
                            newhead.find('th').each(function (i, e) \{  
                                $(e).attr('width', tds.eq(i).width());  
                            \});  
                        \} else \{  
                            newhead.remove();  
                        \}  
                    \})  
                \}  
            \}  
        \});  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 html table 固定表头和列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

分手后的思念是犯贱/ 2024年04月17日 05:34/ 0 赞/ 86 阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 147 阅读

相关 vue+element固定表头滚动条导致表头错误

解决方法 1. untl.js 封装一个公共的方法 // 重置表格 resetTableDom(table

你的名字/ 2023年06月17日 10:57/ 0 赞/ 21 阅读

相关 Table固定列和表头

一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表

灰太狼/ 2023年05月29日 09:28/ 0 赞/ 29 阅读

相关 java 表头固定_常用的固定表头的几种做法

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：第一种感觉最简单的就是分放在两个标签里，这样只控制不含有标题的那个，代码如下: <table>

本是古典何须时尚/ 2022年11月12日 02:49/ 0 赞/ 254 阅读

相关 html表头固定原理,表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表

小灰灰/ 2022年10月05日 12:57/ 0 赞/ 261 阅读

相关 bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面但是由于数据的列比较多，所以

骑猪看日落/ 2022年08月13日 14:47/ 0 赞/ 227 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

た入场券/ 2022年07月12日 06:25/ 0 赞/ 215 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

- 日理万妓/ 2022年07月12日 06:25/ 0 赞/ 219 阅读

相关 easyui datagrid表头 toolbar 固定

当用到EasyUI中的 datagrid 时，设置 fit:true, 就会使表头跟toolbar固定，但是这个容器要设置固定的宽和高。 ![format_png][] !

雨点打透心脏的1/2处/ 2021年08月26日 14:02/ 0 赞/ 669 阅读