Получить все элементы HTML прокручивается в поле зрения

Question

У меня есть прокручиваемая таблица в HTML, которая часто обновляется (примерно раз в секунду) и может содержать до 1000 строк.Очевидно, что не имеет смысла заменять всю таблицу каждый раз, когда она обновляется, поэтому я хотел бы просто заменить строки таблицы, которые в данный момент видимы.проверить их смещения;это работает, но слишком медленно, чтобы быть эффективным.

Сейчас я пытаюсь использовать document.elementFromPoint(), чтобы найти самый верхний элемент поверх <tbody>, который обычно является элементом <td>откуда я могу получить его содержащий <tr>.Это почти работает, за исключением случая, когда сама таблица закрыта другим элементом (например, плавающим лайтбоксом).

В настоящее время я ищу либо третье решение, либо способ получить все элементыпод конкретным пунктом, а не только самым верхним.Если у кого-то есть идеи, как этого добиться, это будет высоко оценено.

Answer 1

Так что я думал об этом и придумал это.

http://jsfiddle.net/RKzRE/7/

Вместо того, чтобы отслеживать все 1000 строк, просто следите за их подмножеством.Для повышения эффективности кэшируйте их скроллтопы при загрузке страницы.Так что, если вы обновите несколько строк выше или ниже области отображения?Вы можете найти счастливую среду между гранулярностью и скоростью обновлений.

Я реализовал только прокрутку вниз и жестко закодировал количество строк для обновления.Но я думаю, что детали будут легко выяснить.

//create an object to hold a list of row top locations
var rowmarkers = new Object;

//gather all rows and store their top location
$('tr').each(function(index) {
    //create markers for every ten rows
    if (index % 10 == 0) {
        $(this).addClass('marker');
        rowmarkers[$(this).prop('id')] = $(this).offset().top;
    }
});

//track whether user scrolls up or down 
var prevScrollTop = $(document).scrollTop();

//monitor scroll event
$(document).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > prevScrollTop) {
        downScroll(currentScrollTop);
    } else {
        //up
    }
    prevScrollTop = currentScrollTop;
});

function downScroll(scrollTop) {
    //find the first row that is visible on screen
    for (var row in rowmarkers) {
        if (rowmarkers[row] > scrollTop) {
            //all rows after this can be updated
            var updaterow = $('#' + row).prevAll('.marker:first');
            if (!updaterow.length) { updaterow = $('.marker:first'); }
            //hardcoded # of rows to update
            for (var i = 0; i < 20; i++) {
                console.log($(updaterow).prop('id'));
                updaterow = updaterow.next('tr');
                updaterow.not('.marker').addClass('updaterow');
            }
            return;
        }
    }
}