在 jQuery 中冻结表头 [英] Freezing the table header in jQuery

问题描述

我有以下脚本来冻结我的表.这在屏幕的横向/纵向模式下工作正常，但是当表格在横向模式下加载并旋转到纵向时，旧的 clone(fixed header {fix_thead}) 驻留在相同的宽度.关于方向变化

jQuery(window).bind('orientationchange', function (e) {CheckInvTableFreeze();}

我再次调用冻结标题函数以使用新表格标题调整冻结标题宽度.再次更改方向时，会出现多个冻结的标题.如何在我原来的桌子基础上只有一个固定的桌头.

var CheckInvTableFreeze = function myfunction() {var CiTable = $('#myTable'),CiThead = CiTable.find('thead'),fix_thead;CiThead.find('th').each(function () {var el = $(this);el.css('宽度', el.width());});fix_thead = CiThead.clone().hide();CiThead.after(fix_thead);fix_thead.css({'位置':'固定'，'顶部':0，'宽度':CiThead.width()});$(document).on('scrollstart', function (e) {if ($(this).scrollTop() > $('#myTable').offset().top) {fix_thead.show();}别的 {fix_thead.hide();}});

解决方案

你可以试试这个

HTML

<header class="tableHeader"><表格><头><tr><th>Aapple</th><th>Bboy</th><th>Ccat</th><th>Ddog</th><th>Eeagle</th><th>Foxrot</th><th>Ggoat</th></tr></thead></标题><div class="tableBody"><表格><tr><td>aaaaaaaaaaaaaaaaaaaaaa</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td></tr><tr><td>a</td><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td></tr><tr><td>a</td><td>b</td><td>cccccccccc</td><td>d</td><td>e</td><td>f</td><td>g</td></tr><tr><td>a</td><td>b</td><td>c</td><td>dddddddddddddddddddddd</td><td>e</td><td>f</td><td>g</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>eeeeeeeee</td><td>f</td><td>g</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>ffffffffffffffffffffffffffffffffffffffffff</td><td>g</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>ggggggggggggggggggg</td></tr></tbody>

CSS

.tableContainer 表 {宽度:100%；边框折叠:折叠；字体大小:16px；字体系列:verdana、arial、sans-serif；}.tableContainer 表 tr td{border-top-color:transparent!important;}.tableContainer 表 tr th,.tableContainer 表 tr td{最小宽度:150px；最小高度:20px；高度:20px；填充:10px；边框:1px 实心 #464e54；断字:断断续续；}.tableHeader {宽度:50%；溢出:隐藏；}.tableBody {宽度:50%；高度:200px；溢出:自动；}

JQUERY

$(function(){$(document).ready(function(){$('.tableBody').scroll(function(){$('.tableHeader table').css('margin-left', - $('.tableBody').scrollLeft());});});});

I have the following scripts to freeze my table. This works fine in Landscape/Portrait mode of screen but when table is loaded in landscape mode and rotated to portrait, the old clone(fixed header {fix_thead}) resides with same width. On orientation change

jQuery(window).bind('orientationchange', function (e) {CheckInvTableFreeze ();}

I am calling the freeze header function again to adjust the freeze header width with new table header. On changing the orientation again multiple freezed header is appearing. How to have only one fixed table head based on my original table.

var CheckInvTableFreeze = function myfunction() {
var CiTable = $('#myTable'),
 CiThead = CiTable.find('thead'),
 fix_thead;

CiThead.find('th').each(function () {
    var el = $(this);
    el.css('width', el.width());
});
fix_thead = CiThead.clone().hide();
CiThead.after(fix_thead);
fix_thead.css(
{
    'position': 'fixed',
    'top': 0,
    'width': CiThead.width()
});
$(document).on('scrollstart', function (e) {
    if ($(this).scrollTop() > $('#myTable').offset().top) {

        fix_thead.show();
    }
    else {

        fix_thead.hide();
    }
});

解决方案

You can try this

HTML

<div class="tableContainer">
      <header class="tableHeader">
        <table>
          <thead>
            <tr>
              <th>Aapple</th>
              <th>Bboy</th>
              <th>Ccat</th>
              <th>Ddog</th>
              <th>Eeagle</th>
              <th>Ffoxrot</th>
              <th>Ggoat</th>
            </tr>
          </thead>
        </table>
      </header>
      <div class="tableBody">
        <table>
          <tbody>
            <tr>
              <td>aaaaaaaaaaaaaaaaaaaaaaa</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>cccccccccccc</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>dddddddddddddddddddddd</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>eeeeeeeee</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>ffffffffffffffffffffffffffffffffffffffffff</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>ggggggggggggggggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

CSS

.tableContainer table {
              width: 100%;
              border-collapse: collapse;
              font-size:16px;
              font-family: verdana,arial,sans-serif;
            }
            .tableContainer table tr td{border-top-color:transparent!important;}
            .tableContainer table tr th,
            .tableContainer table tr td{
                min-width: 150px;
                min-height: 20px;
                height: 20px;
                padding: 10px;
                border: 1px solid #464e54; 
                word-break: break-all;
            }

            .tableHeader {
                width: 50%;
                overflow: hidden;
            }
            .tableBody {
                width: 50%;
                height: 200px;
                overflow: auto;
            }

JQUERY

$(function(){
    $(document).ready(function(){
        $('.tableBody').scroll(function(){
             $('.tableHeader table').css('margin-left', -    $('.tableBody').scrollLeft());
        });
    });
});

这篇关于在 jQuery 中冻结表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！