Автопрокрутка до последней строки таблицы - PullRequest
Новая
       11

Автопрокрутка до последней строки таблицы

0 голосов
/ 29 июня 2018

Я работаю над простой таблицей, используя nicescroll plugin .

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

Моя проблема в том, что, когда я добавил новое поле ввода, которое генерирует базу строк на основе пользовательского ввода, он не будет прокручиваться до последней строки, иногда он отскочит в середине.

Надеюсь, ты мне поможешь.

Спасибо

вот мой пример кода 

// add scroll

$('tbody').niceScroll({autohidemode: false});

// add 1 row
$('button').click(function(){

        var rowCount = $('table > tbody tr').length + 1;

    $('tbody').append('<tr><td>item'+ rowCount +'</td><td>items</td><td>items</td><td>items</td><td>items</td></tr>');

  $('tbody').animate({
  scrollTop: $('tbody').get(0).scrollHeight}, 2000);

});

// scroll to bottom on load
$('tbody').animate({
  scrollTop: $('tbody').get(0).scrollHeight}, 2000);

// generate rows
$('input').keyup(function(){
  $('table tbody tr').remove();
  $('tbody').animate({
  scrollTop: $('tbody').get(0).scrollHeight}, 2000);

  var rowCount = $('table > tbody tr').length + 1;  
    for(var i = 1; i <= $(this).val(); i++ ){
     $('tbody').append('<tr><td>item'+ i +'</td><td>items</td><td>items</td><td>items</td><td>items</td></tr>'); 
    }

});

// clear value on input field
$('input').click(function(){
    $(this).val('');
});

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Нашел ответ. 

setTimeout(function(){ 
  $('tbody').animate({
  scrollTop: $('tbody').get(0).scrollHeight}, 2000);
}, 500);
0 голосов
/ 29 июня 2018

только немного измени свой код js

Путь 1 

...
// generate rows
$('input').keyup(function(){
  // Clean table
  $('table tbody tr').remove();
  // Add new rows
  var rowCount = $('table > tbody tr').length + 1;  
  for(var i = 1; i <= $(this).val(); i++ ){
     $('tbody').append('<tr><td>item'+ i +'</td><td>items</td><td>items</td><td>items</td><td>items</td></tr>'); 
  }
  // Then stop previous anim with clean anim queue (added by every key typed in input) and finally add new anim
  $('tbody').stop(true, false).animate({
      scrollTop: $('tbody').get(0).scrollHeight}, 2000);
  });
});
...

Путь 2 

...
// generate rows
$('input').keyup(function(){
  $('table tbody tr').remove();  
  var rowCount = $('table > tbody tr').length + 1;  
  for(var i = 1; i <= $(this).val(); i++ ){
    $('tbody').append('<tr><td>item'+ i +'</td><td>items</td><td>items</td><td>items</td><td>items</td></tr>'); 
    // Animate during row adding  
    $('tbody').stop().animate({scrollTop: $('tbody').get(0).scrollHeight}, 2000);      
  }
});
...