滚动时修复了 html 表格标题 [英] Fixed html table header while scrolling

问题描述

我有以下表结构:

<头><tr><th colspan="4">Current</th><th colspan="4">New/Requested</th></tr><tr><th nowrap="nowrap">RSD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">打开数量&nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">CRD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">打开数量&nbsp;&nbsp;&nbsp;</th><th nowrap="nowrap">动作</th><th nowrap="nowrap">原因</th><th nowrap="nowrap">动作代码状态</th></tr><tr><td></td><td></td>..... 大量行</tr></tbody></thead>

我正在尝试修复标题，以便在向下滚动时它保持可见.我看了这篇文章，但无法理解.我怎样才能做到这一点?

解决方案

我编写了以下代码以实现我的目标(如问题所问)-

这是我写的插件.

(函数 ($) {$.fn.scrollbarTable = 函数 (i) {var o = {};if (typeof (i) == 'number') o.height = i;else if (typeof (i) == 'object') o = i;否则如果(typeof(i)=='未定义')o = {高度:300}返回 this.each(function () {var $t = $(this);var w = $t.width();$t.width(w - 函数(宽度){var 父母，孩子；如果(宽度 === 未定义){parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');child = parent.children();width = child.innerWidth() - child.height(99).innerWidth();parent.remove();}返回宽度；}());var cols = [];var tableCols = [];$t.find('thead th,thead td').each(function () {cols.push($(this).width());});$t.find('tr:eq(1) th,thead td').each(function () {tableCols.push($(this).width());});var $firstRow = $t.clone();$firstRow.find('tbody').remove();$t.find('thead').remove();$t.before($firstRow);$firstRow.find('thead th,thead td').each(function (i) {$(this).attr('width', cols[i]);});$t.find('tr:first th,tr:first td').each(function (i) {$(this).attr('width', tableCols[i]);});var $wrap = $('
');$wrap.css({宽度:w，高度:o.height，溢出:'自动'});$t.wrap($wrap);})};}(jQuery));

使用方法:

$(document).ready(function(){$('table#tabss').scrollbarTable();}

希望它会在某个地方帮助某人..

无论如何感谢你们所有人的支持... :)

I have the following table structure:

<table>   
<thead>   
    <tr>   
        <th colspan="4">Current</th>   
        <th colspan="4">New/Requested</th>   
    </tr>   
    <tr>   
        <th nowrap="nowrap">RSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Action</th>   
        <th nowrap="nowrap">Reason</th>   
        <th nowrap="nowrap">Action Code Status </th>   
    </tr> 
    <tbody>
        <tr>
            <td></td>  
            <td></td>   
            .....plenty of rows
        </tr>
    </tbody>
</thead>   
</table> 

I am trying to fix the header so that if I scroll down it stays visible. I looked at this post but couldn't understand it. How can I do this?

解决方案

I have written the following code in order to achieve my goal (as asked in question)-

Here is the plugin i have written.

(function ($) {
   $.fn.scrollbarTable = function (i) {
       var o = {};
       if (typeof (i) == 'number') o.height = i;
       else if (typeof (i) == 'object') o = i;
       else if (typeof (i) == 'undefined') o = {
           height: 300
       }
       return this.each(function () {
           var $t = $(this);
           var w = $t.width();
           $t.width(w - function (width) {
               var parent, child;
               if (width === undefined) {
                   parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
                   child = parent.children();
                   width = child.innerWidth() - child.height(99).innerWidth();
                   parent.remove();
               }
               return width;
           }());
           var cols = [];
           var tableCols = [];
           $t.find('thead th,thead td').each(function () {
               cols.push($(this).width());
           });
           $t.find('tr:eq(1) th,thead td').each(function () {
               tableCols.push($(this).width());
           });
           var $firstRow = $t.clone();
           $firstRow.find('tbody').remove();
           $t.find('thead').remove();
           $t.before($firstRow);
           $firstRow.find('thead th,thead td').each(function (i) {
               $(this).attr('width', cols[i]);
           });
           $t.find('tr:first th,tr:first td').each(function (i) {
               $(this).attr('width', tableCols[i]);
           });
           var $wrap = $('<div>');
           $wrap.css({
               width: w,
               height: o.height,
               overflow: 'auto'
           });
           $t.wrap($wrap);
       })
   };
}(jQuery));

How to use:

$(document).ready(function(){
    $('table#tabss').scrollbarTable();
}

hope it will help someone somewhere..

Any way thanks to all of you for your kind support... :)

这篇关于滚动时修复了 html 表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！