Javascript 如何在每页多次显示/隐藏表行？

我对编程和JS相当陌生，所以我想了解一些关于如何进行这方面的建议。我想将该代码用于每页切换的多个实例

默认情况下，我希望表格只显示3行，当一些人单击“查看更多”时，它会显示其余的行，并且应该在单击时切换

$(document).ready(function(){
    // toggle rows
    $( ".viewSection a" ).click(function() {
        var $self = $(this);
        var $nextUl = $self.parent().next();
        $(this).parent().next().slideToggle("fast");
    });
})

HTML:

积压总数：20
莲花绿色环保城
15
莲花绿色环保城
15
积压总数：30
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15
Gaursons Yamuna城市地块
15

JSfiddle：

我不想手动向JS添加单独的ID来激活切换。我所要做的就是在同一个页面上有多个切换区域，并使用JS中的一个类来处理它们。

试试以下方法：

// get all tr from second table with class="tableSeconday:eq"
var rows = $(".tableSeconday:eq(1) tr");
// slice after 4th row as first row include header part and hide them all
$(rows).slice(4,rows.length).each(function(index, element) {
       $(this).hide();
});
// toggle rows
    $( ".viewSection a" ).click(function() {
    // show all tr from table
    $(".tableSeconday:eq(1) tr").show();
});

编辑-要使用

class=“tableSeconday”

对多个

表

进行相同的操作并切换显示/隐藏行，请使用以下查询：

var showingLess = false;

var showLess = function(){
  $(".tableSeconday").each(function(){
    var rows = $(this).find("tr");
    $(rows).slice(4,rows.length).each(function(index, element) {
       $(this).hide();
    });
  });

  showingLess = true;
}

// call showLess() for first time
showLess();

// toggle rows
$( ".viewSection a" ).click(function() {
    if(showingLess)
    {
      $(".tableSeconday tr").show();
        showingLess = false;
    }
    else
    {
       showLess(); 
    }
});

---

基于上一个答案（顺便说一句，做得不错）此版本将切换行可见性，并将文本更改为“查看更多/更少”

Bhushan在这里完成了繁重的工作，但我没有足够的代表添加这一评论。对不起，我认为这是前进的方向。这是处理由类选择的元素的子元素的唯一方法，其中该元素可能在页面上出现多次（AFAIK）

将“显示更多/更少”链接放入父表div的HTML小更改。。。JS是：

$('.tableSeconday').each(function () {
    $(this).find('tr:gt(3)').hide();
});

$(".viewSection a").click(function () {
    var $table = $(this).parent().prevAll('div').find('table');
    $table.find('tr:gt(3)').toggle();
    $(this).html($(this).html() == 'view more' ? 'view less' : 'view more');
});

---

为什么您有两张桌子？为什么一个是隐藏的？我想要的是jquery解决方案而不是Javascript。这不适用于多个表。您可能需要使用遍历方法。@DaveSalomon，我还为多表添加了脚本。谢谢你指出：）谢谢@Bhushan。。。如果我想更多地打开视图，需要做哪些调整。我的意思是，当某个人再次单击“查看更多”时，它应该进入默认状态。还有一件事“查看更多切换”应该可以在这里分别处理两个表。当我单击“查看更多”时，它会扩展这两个表。请检查“编辑答案”，我已经更新了切换行和演示链接updated@Bhushan....I当我点击view more（查看更多）扩展两个或多个表时，希望该切换可以在两个或多个表上工作。我的意思是，表格在不同的部分出现了多次，每个部分都有seprate view more link..ex here toggle不适用于第二部分谢谢@Dave Salomon。

// toggle rows
$( ".viewSection a" ).click(function() {
        $(rows).slice(4,rows.length).each(function(index, element) {
            if ($(this).is(":visible")) {
               $(this).hide();
               $("#showRows").html("view more");
            } else {
                $(this).show();
                $("#showRows").html("view less");
            }
        });
});

$('.tableSeconday').each(function () {
    $(this).find('tr:gt(3)').hide();
});

$(".viewSection a").click(function () {
    var $table = $(this).parent().prevAll('div').find('table');
    $table.find('tr:gt(3)').toggle();
    $(this).html($(this).html() == 'view more' ? 'view less' : 'view more');
});