如何爲固定表格標題設置克隆tr的寬度

Question

最終目標是創建「粘性」列標題，一旦下一個標題到達窗口的頂部就會移動。 我在網上看了一下，發現至少有4個或5個插件，這些插件都基於thead而不是tr th。

到目前爲止，我有一張大桌子，分爲幾個部分，每個部分都有一排th。 我已經使用jQuery將每個tr元素克隆到位於窗口頂部的新表中。

接下來，我固定了每個tr的位置，以便每行都堆疊起來。我遇到的問題是設置寬度時。我已經能夠設置tr，但是當我試圖獲取並設置基於原始的克隆th時，它只是不工作。

有代碼有很多看這個工作，我就包括了jQuery因爲這是我需要幫助，還有一個的jsfiddle這裏：http://jsfiddle.net/wf_4/NQNt7/

(function() { 
    var tableWrapper = $('<div />').attr({ id: 'fakeTableWrapper' }), 
     newTable = $('<table />').attr({ id: 'fakeTable', 'class': 'rpt' }).css({ 'table-layout': 'fixed' }); 

    $('#page').prepend(tableWrapper) 
    $('#fakeTableWrapper').prepend(newTable); 

})(); 

$('tr.tabHead').each(function() { 
    var $this = $(this), 
     w = $this.innerWidth() + 'px', 
     copy = $this.clone(), 

     $tableBodyCell = $('tr.tabHead:first td'), 
     $headerCell = copy.children('th'); 

    copy.removeAttr('class'); 
    copy.children('th').removeAttr('data-coltype'); 
    copy.children('th').removeAttr('data-col'); 
    copy.children('th').removeAttr('class'); 
    copy.children('th').removeAttr('style'); 

    //THIS IS WHAT IS NOT WORKING, TRYING TO SET THE CLONE TH 
    $tableBodyCell.each(function (index) { 
     copy.children('th').removeAttr('style'); 
     $headerCell.eq(index).width($(this).width()); 
    });  

    $('#fakeTable tr').css({ 'width': w }); 

     $('#fakeTable').append(copy); 
}) 

Answer 1

如果我明白你試圖實現，它看起來只是一個選擇器問題。沒有td，其tr的類別爲tabHead作爲其父項，因此代碼未進入$tableBodyCell.each循環。

更換td：

$tableBodyCell = $('tr.tabHead:first td') 

隨着th：

$tableBodyCell = $('tr.tabHead:first th') 

演示：http://jsfiddle.net/NQNt7/5/