Question

我是编程和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：

<div class="block">
    <div class="tabWrapper">
        <div class="tabContainer">
            <div class="tabContent" style="display: none;">
                <div class="childTable">
                    <table class="tableSeconday">
                        <thead>
                            <tr>
                                <th colspan="2">TOTAL BACKLOG: 20</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Lotus Greens Enviro City</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Lotus Greens Enviro City</td>
                                <td>15</td>
                            </tr>
                        </tbody>
                    </table>
                    <!--/tableSeconday-->
                </div>
                <!--/childTable-->
            </div>
            <!--/tabContent-->
            <div class="tabContent" style="display: block;">
                <div class="childTable">
                    <table class="tableSeconday">
                        <thead>
                            <tr>
                                <th colspan="2">TOTAL BACKLOG: 30</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                        </tbody>
                    </table>
                    <!--/tableSeconday-->
                </div>
                <!--/childTable-->
            </div>
            <!--/tabContent-->
        </div>
    </div>
    <div class="viewSection">   <a href="#">view more</a>

    </div>
</div>

JSfiddle：http://jsfiddle.net/s9L128g9/

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

Answer 1

试试这个：

// 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();
});

<强> Demo

编辑 - 要使多个table与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(); 
    }
});

<强> Demo

Answer 2

我认为DOM Traversal是前进的方式。它是处理由类选择的元素的子元素的唯一方法，其中元素可以在页面上多次出现（AFAIK）。

小的HTML更改，以显示更多/更少的＆＃39;链接到父表div ... 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');
});

http://jsfiddle.net/daveSalomon/rnwr07ar/6/

Answer 3

在前一个答案（很好的工作btw）的基础上，这个Demo版本将切换行可见性，并将文本更改为“查看更多/更少”。

// 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");
            }
        });
});

Bhushan在这里完成了繁重的工作，但我没有足够的代表将此添加为评论抱歉

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

3 个答案: