顯示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個表格行並隱藏剩餘的行

回答

相關問題