2013-07-09 21 views
0

我只想显示表格的前6行,当我按下按钮时,前6个将被隐藏,接下来的6个将被显示。如何显示6多行并使用javascript隐藏表格的前5行?

这里是我的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> 

回答

0

我解决了这个问题,通过动态创建的表只用

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

隐藏和显示的TR。

0

这不是好的做法与看法混合逻辑。尝试使用已经存在的组件来显示表格。
您可以选择displayTag:http://www.displaytag.org/1.2/或数据表https://datatables.net/或许多其他。
使用带有ajax调用的服务器端处理来显示下一个记录。