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

问题描述

我有以下脚本来冻结我的表格。这在屏幕的横向/纵向模式下工作正常，但当在横向模式下加载表并旋转到纵向时，旧的克隆（固定标题{fix_thead}）以相同的宽度驻留。关于方向改变

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();
    }
});

推荐答案

你可以试试这个

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屋！