使动态表显示有限的结果，并提供扩展选项答案

【问题标题】：Making a dynamic table display limited results with an option to expand使动态表显示有限的结果，并提供扩展选项
【发布时间】：2011-12-06 13:07:01
【问题描述】：

我有以下 HTML 无法直接编辑，因为它是动态生成的：

<table class="v65-productDisplay" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>
</tbody>
</table>

TR 里面有什么并不重要（我不这么认为），所以我把所有这些东西都放在了外面。此代码块包含 1 个产品：

<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr class="v65-productDisplay-row">
<tr>

所以基本上我想使用 jQuery 只显示其中 4 个产品，并有一个按钮来展开/显示其余产品。我很困惑，不知道从哪里开始。我尝试找到每 4 个 TR，将它们包装在一个 div 中，然后尝试显示/隐藏它们，但它搞砸了我的布局并且根本不起作用。如果有人可以提供帮助，将不胜感激！

编辑：现在使用这个：

<script type="text/javascript">
$(document).ready(function(){
var hiddenElements = $('.v65-productDisplay tr:gt(7)').hide();

if (hiddenElements.size() > 0) {
  var showCaption = '<b>View </b>' + hiddenElements.size() + '<b> More Products</b>';
  $('.v65-productDisplay').append(
      $('<li id="toggler">' + showCaption + '</li>')
          .toggle(
              function() { 
                  hiddenElements.show();
                  $(this).html('<b>Collapse</b>');
              }, 
              function() { 
                  hiddenElements.hide();
                  $(this).text(showCaption);
              }
          )
  );
 }
 });
</script>

除了在“显示 x 更多产品”的显示文本中，它对每个 TR 都进行计数，效果完美。因此，不是说“1 More Product”，而是说“4 More Products”。如何编辑它以正确显示该文本？

【问题讨论】：

你能展示一些你尝试过的事情吗？
请看我的帖子，我发现了一些有用的东西我只需要一个小编辑：

标签： jquery html-table show-hide

【解决方案1】：

您忘记了 </tr> 结束标签，我认为这会导致布局中断。

那么如果你真的需要使用<table>，我建议你先放4个<tr>我喜欢使用的同一个类，比如'<tr class="show">'，然后将新类添加到其他类<tr class="toggle">，创建一个<a id="toggle"></a>

在css文件中添加tr.toggle{display:none;}

然后在js中做：

$('a#toggle').live('click',function(){
$('tr.toggle').slideToggle('slow');// you can try also toggle() instead of slideToggle(), i personally preferr slideToggle() ... as you wish :)
});

【讨论】：

【解决方案2】：

function hideProducts(numberToRemain){  
    var rows = $('.v65-productDisplay tr');
    rows.hide();
    for(int i = 0; i < numberToRemain; i++){
        $(rows[i]).show();
    }
}
function showProducts(){
    $('.v65-productDisplay tr').show();
}

然后在文档就绪事件上调用 hideproducts。

【讨论】：