jquery - 大表格导航——如何控制表头

Question

我有这样的表:http://jsfiddle.net/A34tH/1/

             <table id="fixed_hdr2">
       <thead>
       <tr>
       <th colspan="5" rowspan="2"></th>
       <th colspan="31">december</th></tr>
        <tr>
                  <th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th>        <th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th> 
    </tr>   
                 <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>02</th><th>03</th><th>04</th><th>05</th><th>06</th><th>07</th><th>09</th><th>10</th>        <th>11</th><th>12</th><th>13</th><th>14</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th>    <th>30</th><th>31</th> 
        </tr>   
    </thead>
[...]
    <table>

我需要看到前 3 行和 5 列始终可见。 真实表更大(更多行和列)。当您滚动这么大的表格时，您无法控制标题(左侧和顶部)，因此使用表格很糟糕。尝试了很多解决方案来修复 header (上图)。它们都无法与我的表一起正常工作(我认为问题出在 colspan 和 rowspan 中。它们中的一些几乎可以正常工作，但标题已移动。

有谁知道控制表头的解决方案吗？我没主意了。

测试:

• http://meetselva.github.io/fixed-table-rows-cols/
• http://jsfiddle.net/rCuPf/7/embedded/result/

• http://meetselva.github.io/fixed-table-rows-cols/demo%20v0_01.html

• http://www.matts411.com/static/demos/grid/index.html

• http://salzerdesign.com/blog/?p=191

• HTML table with fixed headers?

• http://jsfiddle.net/J53ax/

• http://www.tablefixedheader.com/demonstration/
• http://jsfiddle.net/rCuPf/7/light/
• http://fixedheadertable.com/
• http://flexigrid.info/
• http://handsontable.com/index.html
• http://trentrichardson.com/examples/jQuery-Powertable/index.html
• http://agichevski.com/2013/10/22/jquery-fixed-table-header/
• http://jsfiddle.net/jmosbech/stFcx/

Answer 1

有几种方法可以做到这一点。第一种是在 CSS/HTML 中将其变成三个表而不是一个。第二种是为其使用某种类型的插件(没看过但我假设有一个)。假设您不想做其中任何一个，您也可以使用 javascript/jQuery 来做这件事

我的方法基于 this approach保持标题和标签固定

var numDays = 31, // Days of the months in the table
    // Get all header cells
    $headerCells = $('thead tr th'), 
    // Get all label cells
    $labelCells = $('tbody tr td:nth-child(-n + 5):not([colspan]), tbody tr [colspan="5"]'), 
    // Get all body cells
    $bodyCells = $('tbody tr td:nth-child(n + 5), tbody tr [colspan="' + (numDays - 5) + '"]');

$bodyCells.each(function() { // Give each body cell `position:absolute`
    absoluteIt($(this));    
});                   
$headerCells.each(function() { // Give each header cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '2'); // When scrolled, place over the other table cells
});
$labelCells.each(function() { // Give each label cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '1'); // When scrolled, place over tbody cells
});

$(window).scroll(function(){ // Compensate for scrolling
    // Get scroll positions
    var sLeft = - $('body').scrollLeft(), sTop = - $('body').scrollTop();
    $headerCells.each(function() { // Only scroll horizontally
        $(this).css({
            'left':sLeft + $(this).data('origPosition').oLeft
        });
    });
    $labelCells.each(function() { // Only scroll vertically
        $(this).css({
            'top': sTop + $(this).data('origPosition').oTop
        });
    });        
});


function fixIt($elem) { // Changes the given element into `position:fixed`
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.offset().top, 
        oLeft: $elem.offset().left,
        oWidth: $elem.width(),
        oHeight: $elem.height()
    });

    setTimeout(function() { // Necessary to force after the `.data`
        $elem.css({ // Fix the element and make sure it looks like it did before
            position: 'fixed',
            top: $elem.data('origPosition').oTop,
            left: $elem.data('origPosition').oLeft,
            width: $elem.data('origPosition').oWidth,
            height: $elem.data('origPosition').oHeight
        });
    }, 0);
}
// I tried using the same function as above and changing the position afterwards
// but it didn't work out very well
function absoluteIt($elem) { // Changes the given element into `position:absolute`
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.offset().top, 
        oLeft: $elem.offset().left,
        oWidth: $elem.width(),
        oHeight: $elem.height()
    });

    setTimeout(function() { // Necessary to force after the `.data`
        $elem.css({ // Absolutely position the element and make sure it looks like it did before
            position: 'absolute',
            top: $elem.data('origPosition').oTop,
            left: $elem.data('origPosition').oLeft,
            width: $elem.data('origPosition').oWidth,
            height: $elem.data('origPosition').oHeight
        });
    }, 0);
}

Demo

我的演示假设标签作为一个整体占用了 5 的 colspan。This question/answers如果您需要更多动态结果，可能会有用，因为它使用自定义的 nth-col 类型

Here is another version将 table (经过一些修改)放在容器中。它利用了一种伪固定位置。此版本的重大变化:具有任意宽度/高度的 div 容器，向 table 添加了以下 CSS: transform: translateZ(0);

有问题可以私信我