Показать/скрыть строки с jquery

Question

Привет Я использую некоторые модифицированные коды из другого сообщения. В основном я хочу переключиться между показом 10 строк таблицы, чтобы показать все строки (например, 50). У меня есть это, чтобы показать от 10 строк до всех, однако мне нужно сделать это, так что, если я снова нажму на div, он переключит или сбрасывает назад, показывая 10 строк.

<script type="text/javascript"> 
var numShown = 10; // Initial rows shown & index 
var numRows = $('tbody').find('tr').length; 
var numLeft = numRows - numShown; 

$(document).ready(function(){ 
// Hide rows and add clickable div 
$('tbody') 
    .find('tr:gt(' + (numShown - 1) + ')').hide().end() 
    $('#table_wrapper').after('<div id="more">Show all offers <span> 
    (' + numLeft + ' more)</span></div>'); 

$('#more').click(function(){ 
    numShown = numShown + numRows; 
    $('tbody').find('tr:lt('+numShown+')').show(); 
    $("#more").html("Show top 10 offers"); 
}) 
}) 
</script> 

Answer 1

Это один из видов использования .toggle() метода:

$('#more').toggle(
      function(){ 
      numShown = numShown + numRows; 
      $('tbody').find('tr:lt('+numShown+')').show(); 
      $("#more").html("Show top 10 offers"); 
      }, function() { 
      // set the local vars you need here 
      $('tbody').find('tr:gt('+(numShown-1)+')').hide(); 
      $('#more').html('Show all offers <span>('+numLeft+' more)</span>'); 
      }); 

Поскольку нет разметки, я не уверен, что это именно то, что будет работать с вашей установкой , но задача состоит в том, чтобы сбросить строки в их исходном состоянии во второй функции от toggle()

Answer 2

$(some_selector) возвращает список подходящих элементов. Вы можете называть их .slice() и делать все, что хотите, на каждом из элементов. Обратите внимание, что элементы в списке не являются объектами jquery, а объектами DOM по умолчанию (которые вы получаете из методов getElementBy...). Вы можете либо работать над ними, либо делать $(domobject), чтобы снова получить объект jquery.

Answer 3

Попробуйте это:

$('#more').click(function(){ 
    if(numShown <= 10) 
    { 
     //show some more 
     numShown = numShown + numRows; 
     $('tbody').find('tr:lt('+numShown+')').show(); 
     $("#more").html("Show top 10 offers"); 
    } 
    else 
    { 
     //hide some rows 
     numShown = 10; 
     $('tbody').find('tr:gt('+numShown+')').hide(); 
     $("#more").html("Show more"); 
    } 
}) 

Answer 4

Я предпочитаю использовать addClass() для скрыть строки, добавив класс в стиле display: none; в моей таблице стилей CSS. Затем, чтобы показать ранее скрытые строки, все, что мне нужно сделать, это выбрать строки с этим классом и удалить из них класс. Sth like:

$('.hidden_row').removeClass('hidden_row');