javascript - 如何在定期更改的 HTML 表格中保持所选行始终可见？

Question

我拼凑了一些 Javascript 和 HTML，这将使我能够选择表格行。它还会通过计时器定期在顶部添加一些行。这只是稍后将进入的 ajax 调用的占位符。

我希望表格可滚动，因此可滚动 div 内有一个表格。这很有效，但可能会使问题变得更复杂。

我遇到的问题是，当新行填充在顶部时，我不希望表格移动到这些新行，我希望表格的视口(viewport)保持不变。如果所选行不在顶部附近，则当填充新行时，会自动发生这种情况。但是，如果所选行靠近顶部，则当添加新行时，它们会将所选行移出屏幕。我希望将它们添加到顶部，但不要移动/更改可视区域。

我有一个 jsFiddle 演示 here这说明了问题。添加行的代码如下所示:

    for (var i = 0; i < 5; i++) {
    $('#record_table tbody')                      // select table tbody
       .prepend('<tr class="table_row" />')       // prepend table row
       .children('tr:first')                      // select row we just created
       .append('<td class="td1">New row</td><td>New row data</td><td class="td3">more data</td>');

jsFiddle Demo

Answer 1

好的，这是工作代码:

$( document ).ready(function() {
var wasClicked = false;

$('#record_table tbody').on('click', '.table_row', function() {
    $('.table_row').removeClass('selected'); // "Unselect" all the rows
    $(this).addClass('selected'); // Select the one clicked
    wasClicked = true;  
    $('div.tbody.scrollit').scrollTop(  $('div.tbody.scrollit').scrollTop() + 1);
});

setInterval(heartbeat,10000);

function heartbeat() {
    for (var i = 0; i < 5; i++) {
        $('#record_table tbody')                    // select table tbody
         .prepend('<tr class="table_row" />')       // prepend table row
         .children('tr:first')                      // select row we just created
         .append('<td class="td1">New row</td><td>New row data</td><td class="td3">more data</td>');  

        if (wasClicked) {
            $('tbody').animate({scrollTop: 22}, 1 );
        }
    }
}

});

我做了什么？

首先，我在 for 循环末尾添加了以下行，用于添加行:

 $('tbody').animate({scrollTop: 22}, 1 );

它将 scrollTop 移动 22 像素，这正是您的 tr 的高度，我建议您直接从 css，而不是硬编码。

其次，我添加了一个 bool 变量来检查是否单击了一行(在顶部):

var wasClicked = false;

和

wasClicked = true; //for validation to the on click function

以及在 for 循环中使用 IF 语句进行验证:

if (wasClicked) {
    $('tbody').animate({scrollTop: 22}, 1 );
}

第三，由于滚动在顶部时不起作用，因此将以下几行添加到点击函数中:

$('div.tbody.scrollit').scrollTop(  $('div.tbody.scrollit').scrollTop() + 1);

该行将滚动移动一个像素，以便上面的所有代码都能正常工作。

忘记提及，您还必须添加一些验证以防止用户不 停止点击同一行，那里有一些移动，但该行仍然没有离开视点。

只需检查同一行是否再次被单击，并阻止移动。这并不难实现。 希望我能帮忙。