Question

我在这里有一个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)
    }
});

任何帮助将不胜感激。

Answer 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正在让它只选择第一张表。我想。

Answer 2

我想我已整理好了。

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

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

可以在http://api.jquery.com/first-child-selector/找到相关的jQuery文档。关键的一点是：首先将你限制在一个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;
    });
 }

将jQuery函数应用于具有相同类名的多个元素？

2 个答案: