如何使用javascript再顯示6行並隱藏表的前5行？

Question

我只想顯示表格的前六行，當我按下按鈕時，前六行將被隱藏，而后六行將被顯示。

這是我的JavaScript，顯示前6個表格：

function setInnerHTML(){
<%
    ArrayList userBoxList = BoxList.getInstance().getUserBoxList();

    if(userBoxList.size()>6){%>
        document.getElementById('down').disabled = false;
        document.getElementById('page').value = counter + 1;
        <% size = 6;
    }
    else{
        size = userBoxList.size();
    } 

    for(x=0; x < size; x++)
    {
        UserBox box = (UserBox) userBoxList.get(x); %>  
        document.getElementById(origID).onclick = changeColor;

        var items = document.getElementById(origID).getElementsByTagName("td");
        items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
        items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
        items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
        items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB"; 

        origID++;

    <%}
%>
}

我的HTML代碼：

<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>

Answer 1

將邏輯與視圖混合是不好的做法。 嘗試使用現有組件顯示表。
您可以選擇displayTag： http : //www.displaytag.org/1.2/或datatables https://datatables.net/或其他許多選項。
將服務器端處理與ajax調用一起使用以顯示下一條記錄。

Answer 2

我通過僅使用創建動態創建表來解決了這個問題

> document.getElementById.style.display = "table-row" and 
> document.getElementById.style.display = "none"

隱藏和顯示TR。