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

试试这个：

$('#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 2

这是.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 3

我更喜欢使用addClass（）隐藏行，方法是在我的CSS样式表中添加一个用display: none;样式的类。然后，要显示以前隐藏的行，我要做的就是选择具有此类的行并从中删除类。就像：

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

Answer 4

$(some_selector)返回匹配元素的列表。您可以在它们上面调用.slice()，并在每个元素上执行任何操作。请注意，列表中的项不是jquery对象，而是默认的DOM对象（来自getElementBy...方法的对象）。您可以处理这些问题，也可以$(domobject)再次获取jquery对象。

使用jquery显示/隐藏行

4 个答案: