在可滾動的div中查找表行數

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");
        }
    });

---

活生生的例子

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.
 }