Question

我在可滚动div中有500行的表。如何知道div的视口内当前显示的行数。

我的目标是在更新后对表进行部分更新，并在滚动时进行其余更改。

Answer 1

您需要比较scrollTop()和offset().top以确定div区域中的哪些行。

boundTop：“视口”开始的位置 boundBottom：“视口”结束的地方

var boundTop = div.scrollTop()
var boundBottom = div.scrollTop() + div.height()

trOffset：每行的位置

var trOffset = $("table tr").offset().top

在scroll事件中，检查trOffset位于boundTop和boundBottom之间的每一行，然后您可以向该行添加一个类（.active ，例如），最后你可以更新每一行.active：

    $("table tr").each(function () {
        trOffset = $(this).offset().top;
        if ((trOffset > boundTop) && (trOffset < boundBottom)) {
            $(this).addClass("active");
            $("td", this).stop().animate({
                "padding": "4px 10px 4px 30px"
            }, "fast");

        } else {
            $(this).removeClass("active");
            $("td", this).stop().animate({
                "padding": "4px 30px 4px 10px"
            }, "fast");
        }
    });

Live exemple

Answer 2

您需要迭代可见的每一行。

这是小提琴 - http://jsfiddle.net/j0up6z5y/

function isVisible( row, container ){

    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = $(container).offset().top,
        containerHeight = $(container).height();

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}

Answer 3

在单击一行然后更改数据后获得索引时，您可以使用从AJAX调用返回的数据修改页面上的行：

 function modifyCell(data) {
   var row = $("#tblResults tbody tr").eq(rowIndex);  //index set with the click
   var cell = $(row).children('td').eq(6);  // column to change
   $(cell).html(data);  //modify cell user sees.
 }

在可滚动div中查找表行数

3 个答案: