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

Question

我有以下 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>

工作完美，除了在“显示更多产品”的显示文本中它正在计算每个TR。因此，与其说“更多产品”，不如说“更多产品”。我如何编辑它以正确显示该文本？

Answer 1

您忘记了 结束标签，我认为这会导致布局破坏。

那么如果您确实需要使用 我建议您首先放置 4 我喜欢使用的同一个类，例如 '' 然后将新类添加到其他类，
在 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 :)
});

Answer 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。