在jsp中将产品显示为网格

时间:2014-03-31 10:47:24

标签: html jsp while-loop grid

我正试图在这样的网格上显示我的数据库内容:

grid example

我将所有产品都放在一个垂直的colmun上:

my products display

产品插入阵列“Arrayp”,现在我可以在垂直表或水平表上显示数据库内容,但不会在提到的网格上,这是我的代码,我将非常感谢帮助

<TABLE  > 
<%  
while (cmp<=size ) 
{ 
out.println("<tr>");
out.println("<td>");

out.println("<p><img src=\"images/" + Arrayp.get(cmi) + " \" width=\"100\" height=\"100\" /></p>");
out.println("<p> categorie " + Arrayp.get(cmp) + "</p>");  
out.println("<p> prix  "  + Arrayp.get(cmpri) + "</p>"); 
out.println("<p>quantité disponible " + Arrayp.get(cmpqt) + "</p>"); 
out.println("<form name='f' action='panier' method='post'>");
out.println("<input type='hidden' value= "+Arrayp.get(cmbref) +" name='ref' >");
out.println("<p>quantité desirée</p>");
out.println("<p><input type='text' name='nbr' ></p>");
out.println("<input type='submit' value='ajouter au panier' />") ;
out.println ("</form>");




cmp=cmp+8;
cmi=cmi+8;
cmpqt=cmpqt+8;
cmbref=cmbref+8;
out.println("<p></p>");
out.println("<p></p>");



out.println("</td>");
out.println("<tr>");
%>
</TABLE>

2 个答案:

答案 0 :(得分:0)

使用counter计算items,当4个项目交叉时,添加新的<tr>标记。现在,您为每个<tr>添加了item标记。下面我举例说明,您可以根据需要进行修改。

像:

<html>
<head>
tr {
 display: block;
 border: 1px solid blue;
}
td{
    border: 1px solid red;
    padding: 8px;
}
</style>
</head>
<body>
    <%
     int start = 0;
     int elementsLen = 10;
     int counter = 1;
     int noOfItemsInRow = 4; //set number of td you want in tr
     StringBuilder sb = new StringBuilder();
     noOfItemsInRow++;

     //start table
     out.println("<table>");
     while(start<=elementsLen){ 
        sb.append("<td>");
        sb.append(start);
        sb.append("</td>");

        //check if noOfElemntsInRow elements is reached keep it in a new row
        if(++counter==noOfItemsInRow){
            out.println("<tr>");
            out.println(sb.toString());
            out.println("</tr>");
            sb.setLength(0);
            counter = 1;
        }
        start++;
     }
    //print remaining td elements in a new row
     if(sb.length()>1){
         out.println("<tr>");
         out.println(sb.toString());
         out.println("</tr>");
     }
    //close table
     out.println("</table>");
    %>
</body>
</html>

输出:

output format

注意:在jsp中使用scriptlet不是一个好主意,而应该使用jstl。

答案 1 :(得分:0)

我现在正在使用它,我之前尝试过if而且它没有正常工作。 奇怪的是,我今天尝试了它而没有关闭tr我的意思是没有/ tr到底它工作,我有一个干净的网格:D 更新:通过关闭while循环之外的TR解决了问题,thx解决了所有问题 这是工作代码

 int c =0;
      int numberofcolumns=4;
      %>

    <TABLE> 

    <%  
    while (cmp<=size ) 
    { 
    c++;

    if (c==numberofcolumns){
        numberofcolumns=numberofcolumns+3;
    out.println("<tr>");
    }
    out.println("<td>");

    out.println("<p><img src=\"images/" + Arrayp.get(cmi) + " \" width=\"100\" height=\"100\" /></p>");
    out.println("<p> categorie " + Arrayp.get(cmp) + "</p>");  
    out.println("<p> prix  "  + Arrayp.get(cmpri) + "</p>"); 
    out.println("<p>quantité disponible " + Arrayp.get(cmpqt) + "</p>"); 
    out.println("<form name='f' action='panier' method='post'>");
    out.println("<input type='hidden' value= "+Arrayp.get(cmbref) +" name='ref' >");
    out.println("<p>quantité desirée</p>");
    out.println("<p><input type='text' name='nbr' ></p>");
    out.println("<input type='submit' value='ajouter au panier' />") ;
    out.println ("</form>");


    out.println("<td>");

    cmp=cmp+8;
    cmi=cmi+8;
    cmpqt=cmpqt+8;
    cmbref=cmbref+8;
    out.println("<p></p>");
    out.println("<p></p>");





    }//
   out.println("</tr>");
    %>
    </TABLE>