1

ここにjsfiddleがあります：http://jsfiddle.net/biggest/3hjNc/58/

私はかなりまともに機能するスクロールテーブルを構築しました。しかし、これらの種類のテーブルが 2 つ以上ある場合、作成した jQuery 関数は最初のテーブルにのみ適用されるようです。各テーブルに「ID」を追加せずに、各テーブルをループするにはどうすればよいですか。「each」と「find」のさまざまな組み合わせを試してみましたが、これにはある種の$(this). 私が試みるすべての試みは、完全に失敗するか、最初のテーブルにのみ適用されます。

これは明らかかもしれませんが、わかりやすくするために、これはスクロール テーブルであるため、実際には複数のテーブルが組み合わされて 1 つに表示されます。 .tablesContainer= すべてをラップし、おそらく $(this) ターゲットになるはずの div が私の推測です。テーブル構造の残りの部分は、上記の jsfiddle で確認できます。

これは、すべてを関数に入れ、最後にそれらを呼び出す jquery のすべてです。関数は、関数が実行headerResize()されるたびに最後に呼び出されtableSize()ます。

$(document).ready(function(){
/****Table Functionality****/
    /*** Gives Header Cells equal width to Body Cells ***/
    /*--------------------------------------------------*/
    var $tableBodyScrollCell = $('.tableScroller tbody tr:first td');
    var $headerA = $('.headerScroller a');
    function headerResize(){
        $tableBodyScrollCell.each(function(index){
            $headerA.eq(index).width($(this).width());
        });
    }
    /*--------------------------------------------------*/
    /*** Changes height to equal viewerPort on big tables ***/
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
    var $tablesContainerWidth = $('.tablesContainer').width();
    var $tableScroll = $('.tableScroller');
    var $headerHeight = $('.headerScroller').height();
    var $tableScrollTHeight = $('.tableScroller .table').height();
    var $tableScrollTWidth = $('.tableScroller .table').width();
    var $actionScroll = $('.actionScroller');
    var $topSectionHeight = $('#topSection').height();
    var $actnScrollDefaultW = Number(100);
    function tableSize(){  //17px difference to compensate for scrollbar
        if ($tableScrollTHeight > (viewportHeight-$topSectionHeight) - $headerHeight){
            if ($tableScrollTWidth == $tablesContainerWidth){
                $tableScroll.height((viewportHeight-$topSectionHeight) - $headerHeight) - 17;
            }
            else{
                $tableScroll.height((viewportHeight-$topSectionHeight) - $headerHeight);
            }
            $actionScroll.height((viewportHeight-$topSectionHeight) - $headerHeight - 17);
            $actionScroll.width($actnScrollDefaultW);
        }
        else{
            if ($tableScrollTWidth == $tablesContainerWidth){
                //alert("tableScrollTWidth = 100%");
                $tableScroll.height($tableScrollTHeight);
            }
            else{
                $tableScroll.height($tableScrollTHeight + 17);
            }
            $actionScroll.height($tableScrollTHeight);
            $actionScroll.width($actnScrollDefaultW + 17);
        }
        if ($tableScrollTHeight > $tableScroll.height() && $tableScrollTWidth == $tablesContainerWidth){//If there is a vertical scroll but NO Horizontal scroll
            $actionScroll.height($tableScroll.height());
        }
        $('.actionHead').width($('.actionScroller').width());
        headerResize();
    }
    /*--------------------------------------------------*/
    /*** Scrolls the table Header and Fixed column ***/
    $tableScroll.scroll(function(){         
        scrollHandler('tableScroller');
    });
    function scrollHandler(scrollContainer) {
        $('.headerScroller')[0].scrollLeft = $('.tableScroller')[0].scrollLeft;
        $('.actionScroller')[0].scrollTop = $('.tableScroller')[0].scrollTop;
    }
    /*--------------------------------------------------*/
    /*** runs functions ***/
    if ($(".tablesContainer").length == 0) {
        //Do nothing!!!
    }
    else{
        tableSize();
        $(window).resize(tableSize)
    }
});

どんな助けでも大歓迎です。

4

2 に答える 2

1

私はあなたを分類したと思います。

フィドルの 8 行目のセレクターは次のようになります。

    var $tableBodyScrollCell = $('.tableScroller tbody tr:first-child td');

関連する jQuery ドキュメントは、http://api.jquery.com/first-child-selector/にあります。重要なポイントは、:first は 1 つの tr に制限するのに対し、:first-child は親ごとに 1 つを与えるということです。

59 ～ 62 行目の scrollHandler 関数では、.headerScroller要素をループする必要があります。次に例を示します。

function scrollHandler(scrollContainer) {
    $('.headerScroller').each(function(i) {
      $('.headerScroller')[i].scrollLeft = $('.tableScroller')[i].scrollLeft;
      $('.actionScroller')[i].scrollTop = $('.tableScroller')[i].scrollTop;
    });
 }
于 2013-04-02T16:01:28.227 に答える