Question

我试图缩短表格。我必须只显示前3行而剩下的是隐藏的。在表格的底部，thers是显示剩余行数的链接。如何可能

码

$.ajax({
    url: currentUrl,
    cache: false
}).done(function (report) {

    var testhistbl =
        '<br><table width="680px" id="report" > <tbody id="mytbody"><tr style="display: table-row;"><th  valign="center">User</th><th  valign="center" >Test Name</th><th   valign="center">VM</th><th valign="center">Browsers</th><th  valign="center">Result</th><th id="headerid"></th></tr>';

    recentreport.forEach(function (test) {

        testhistbl += '<tr class="odd"><td >' + email + '</td><td>' +
            test.names + ' </td><td >' + test.os + '</td><td >' +
            result.browser + '</td><td >' + test.replace('Test ', '') +
            ' </td> <td><div class="arrow" onclick="expandRow();"></div></td></tr><tr style="display: none;" ><td style="background-color: #C0C0C0;color:black;" colspan="5">' +
            test.passfail +
            ' </td><td style="background-color: #C0C0C0;color:white;" ></td></tr>';
    });
})
testhistbl +=
    '<tr id="more"><td >Show More</td> </tr></tbody></table>';
$('#testhistyTbl').html(testhistbl);

showMore(report.length);

});



function showMore(len) {

    var $table = $('table').find('tbody'); // tbody containing all the rows
    var numRows = $('.odd').length;
    if (len > '3') {
        $("#more").show();
    } else {
        $("#more").hide();
}
        $('#more').click(function () {

        });
    }

我不知道在more.click函数中执行什么。

请查看表mytable

这里我只想显示前3行，点击显示更多链接我还要显示剩下的行

Answer 1

以下是 JavaScript代码：

function DisplayOnlyRows(count){
  var i =0;
  $('#report tr.odd').each(function(){
    if(i >= count){
      $(this).hide();
    }
    i++;
  });
}

DisplayOnlyRows(3);

$("#show_more").click(function(){    
  $("#mytbody tr.odd").not(':visible').show();
  $(this).hide(); // To hide the `show_more` button
});

因此，DisplayOnlyRows计算应该可见的表行数，其余所有行都将被隐藏。此外，在show_more按钮click事件中，我们会显示所有隐藏的table rows。就是这样。

Answer 2

我更新了您的Jsfiddle添加按钮

 <button>Show more/less</button>

和JQuery函数

$("button").click(function () {
    var countrows = 0;
    $('#report tr.odd').each(function () {
        countrows++;
        if (countrows > 3) {
            $(this).toggle();
        }
    })
});

使用$('#report tr.odd').each(function()，您遍历类#report的表odd中的所有行。当计数器countrows大于3时，您可以使用toggle()更改行的可见性。

显示3个表格行并隐藏剩余的行

2 个答案: