1

我在这里有一个 jsfiddle：http: //jsfiddle.net/biggest/3hjNc/58/

我已经建立了一个相当不错的滚动表。但如果我有两个或更多这样的表，我构建的 jQuery 函数似乎只适用于第一个。我如何让它循环遍历每个表，而不向每个表添加任何类型的“id”。我已经尝试了“each”和“find”的各种组合，我很确定它会涉及到，以及某种$(this)，但我很确定我在某个地方弄乱了语法。我尝试的每一次尝试要么彻底失败，要么只适用于第一张桌子。

这可能很明显，但为了清楚起见 - 因为它是一个滚动表，它实际上由几个表组合在一起显示为一个表。 .tablesContainer= 一个包含所有内容的 div，可能应该是 $(this) 目标，这是我的猜测。表结构的其余部分应在上面的 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

我还没有解决所有问题（还没有！）但发现了一些改进：

function scrollHandler(scrollContainer) {
    $('.headerScroller')[0].scrollLeft = $('.tableScroller')[0].scrollLeft;
    $('.actionScroller')[0].scrollTop = $('.tableScroller')[0].scrollTop;
    $('.headerScroller')[1].scrollLeft = $('.tableScroller')[1].scrollLeft;
    $('.actionScroller')[1].scrollTop = $('.tableScroller')[1].scrollTop;
}

你以前只使用索引0，所以你只改变了第一个表，现在第二个表标题滚动。

我认为另一个问题在这里：

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

我认为，:first它只选择了第一张桌子。

于 2013-04-02T15:54:55.530 回答
1

我想我已经把你整理好了。

您的小提琴第 8 行的选择器应为：

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

相关的 jQuery 文档可以在这里找到http://api.jquery.com/first-child-selector/。关键的要点是 :first 将您限制为一个 tr，而 :first-child 为每个父母提供一个。

在第 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 回答