Jquery的固定報頭和一個表的固定柱，細胞的寬度可以是變化的

Question

這個問題已經被提出了相當多的時間和我試圖與從堆棧上溢不少解決方案，包括以下 question-1少數提到，question-2 但是當表格寬度是動態的時候它們都不起作用，元素行也是如此。

我的表結構使用另一個jquery插件jqueryTreeTable插件。而且結構有點複雜。它看起來像this，我需要在這裏是有它的頭固定在滾動的水平，並有一列固定的水平滾動的內容可能有水平滾動條。

Answer 1

我在網上找到了這個解決方案，但找不到引用，我不得不做很多改動。請參閱下面代碼中的評論以瞭解我添加的更改。這適用於浮動頭部分。

  $("table.tableWith-FloatingHeader").each(function() { 
       $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>"); 

       var originalHeaderRow = $("thead", this); 
       originalHeaderRow.before(originalHeaderRow.clone()); 
       var clonedHeaderRow = $("thead", this); 

       clonedHeaderRow.addClass("tableFloatingHeader"); 

       originalHeaderRow.addClass("tableFloatingHeaderOriginal"); 
       if(originalHeaderRow.hasClass("tableFloatingHeader")){ 
        originalHeaderRow.removeClass("tableFloatingHeader"); 
       } 

       clonedHeaderRow = $('.tableFloatingHeader'); 
       clonedHeaderRow.css("position", "absolute"); 
       clonedHeaderRow.css("top", "0px"); 
       clonedHeaderRow.css("left", $(this).css("margin-left")); 
       // originally visibility hidden only was used but it didn't work for me so I had to use display:none 
       clonedHeaderRow.css("visibility", "hidden"); 
       clonedHeaderRow.css("display", "none"); 

       var tableBody = $('tbody', this); 
       tableBody.css('display', 'table'); 


      }); 


      UpdateTableHeaders(); 
      $(window).scroll(UpdateTableHeaders); 
      $(window).resize(UpdateTableHeaders); 


      // since my table's width could be changing on click to the td (expand/collapse of td leads to change in width so to fix the width for the head and body UpdateTableHeader function is called. 
      $("table.tableWith-FloatingHeader").undelegate("td", "click"); 
      $("table.tableWith-FloatingHeader").delegate("td", "click", function() { 
       UpdateTableHeaders(); 
      }); 


// functions ** 



// function to fix the table head's width and it's visibility 
    function UpdateTableHeaders() { 
     $("div.divTableWithFloatingHeader").each(function() { 
      var originalHeaderRow = $(".tableFloatingHeaderOriginal", this); 
      var floatingHeaderRow = $(".tableFloatingHeader", this); 
      var offset = $(this).offset(); 
      var scrollTop = $(window).scrollTop(); 
      if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) { 
       floatingHeaderRow.css("visibility", "visible"); 
       floatingHeaderRow.css("display", "block"); 
       floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px"); 
       if(!floatingHeaderRow.hasClass('visible')) 
        floatingHeaderRow.addClass('visible'); 
       originalHeaderRow.css("visibility", "hidden"); 
       originalHeaderRow.css("display", "none"); 

       // Copy cell widths from original header 
       $("th", floatingHeaderRow).each(function(index) { 
        var cellWidth = $("th", originalHeaderRow).eq(index).css('width'); 
        $(this).css('width', cellWidth); 
       }); 

       // Copy row width from whole table 
       floatingHeaderRow.css("width", $(this).css("width")); 
      } 
      else { 
       originalHeaderRow.css("visibility", "visible"); 
       originalHeaderRow.css("display", "block"); 
       floatingHeaderRow.css("visibility", "hidden"); 
       floatingHeaderRow.css("display", "none"); 
       floatingHeaderRow.removeClass('visible'); 
       floatingHeaderRow.css("top", "0px"); 
      } 
// since my problem was when I cloned the original head and hide it, it wasn't able to sync with the change in width of the table body. I had to sync the width of the each of the tbodys tds with theads tds. 
      updateHeaderWidth(); 
     }); 
    } 

// function to sync width for the table head with table body. 
    function updateHeaderWidth() { 


     $("div.divTableWithFloatingHeader").each(function() { 

      var table = $(this); 
      var widths = []; 
      var i = 0; 

      // iterate through each of the tbodys first trs tds to get their width 
      table.find('tbody .first-row td div.width-set').each(function(){ 

       widths[i] = $(this).width(); 
       i ++; 
      }); 

      // iterate through theads ths add an element with the same width to both first tds and ths 
      // note: step to add element to both the element is required else it would go a little out of sync 
      table.find('thead.tableFloatingHeaderOriginal th.width-get, thead.tableFloatingHeader th.width-get').each(function(){ 

       i = $(this).attr('data-col-number'); 
       var width = widths[i]; 
       var widthKeeperTag = '<div style="width: ' + width + 'px; height: 1px;"></div>'; 
       if($(this).find('div').length){ 
        $(this).find('div').replaceWith($(widthKeeperTag)); 
       }else{ 
        $(this).html($(this).html() + widthKeeperTag); 
       } 
      }); 
     }); 
    } 

Answer 2

有用jQuery插件與表工作（包括重新相當大的列和固定報頭）

• Flexigrid
• Ingrid
• Table fixed header
• jQuery Grid