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

我试图缩短表格。我只能显示前3行，其余都隐藏起来。并且在表格的底部，它们是显示剩余行的链接。它是可能显示3个表格行并隐藏剩余的行

代码

$.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() { 

     }); 
    }

我不知道whatto的more.click函数内部执行。

请看表mytable

在这里，我只想显示第3行的同时单击显示更多链接我要显示剩余行也

来源

2014-03-05 Sush

请javascript代码 – Pavlo

你还缺少你'showMore'方法的右括号纠正你的提琴 – CodingIntrigue

你在找这个http://jsfiddle.net/3mT7z/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。而已。

来源

2014-03-05 08:51:47 Pavlo

我更新了Jsfiddle通过表odd类的#report所有行添加一个按钮

<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()你循环。当计数器大于3时，用toggle()更改该行的可见性。

来源

2014-03-05 09:19:07 user2314737

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

回答

相关问题