0

我正在制作一个简单的表，它使用 jdbc 连接存储数据库中的产品详细信息。

我的表如下所示：

    <table>

     <td>

    <img border="3"  
        src="image path" height="200" width="200" />

        <p align="center"></p>    // these tag contains specific product details from db
        <p align="center"></p> 

      </td>   
      </table>

现在我正在获取特定列中的每个产品详细信息（即单行中的多列），但我的问题是这一行不断扩展，我希望这一行（由多列组成）自动中断让我们说每 5 个产品。

简而言之，我想像在 Flipkart 中一样以 4 xn 格式排列我的产品详细信息，如下所示：

http://www.flipkart.com/mobiles/android-phones~type/pr?sid=tyy,4io&otracker=hp_nmenu_sub_electronics_0_Android%20phones

您可以看到第一个产品 sony experia 然后 lg 然后在 samsung Galaxy 产品之后，新行开始，然后又是 4 个产品，然后是新行。通过这种方式，我需要使用 jdbc 连接显示来自数据库的产品。

谁能建议我实现这一目标的最佳方法是什么。& 是否有任何选项可以在第 4 个之后打破列然后开始新行？

我在 jsp 中显示数据库内容，如下所示，仅用于演示：

       <%   
        //1. Retrieve all products from database   

        //1a.  Load the Driver   
        Class.forName("com.mysql.jdbc.Driver");   
        //1b.  Get a connection to the database   
        Connection con = DriverManager.getConnection("url", "un", "pwd
        PreparedStatement ps = con.prepareStatement("SELECT * FROM table");   
        //1d.  Execute and retrieve our result   
        ResultSet rs = ps.executeQuery();   

        //2. Base on the results returned, construct a table   
    %>   
    </p>   

    <table border="0">    
     <%     

     if(rs.next()) {        
     rs.beforeFirst();  // for making sure you dont miss the first record.      
      while(rs.next())      
          {                        // opening while loop brackets.      

     %>        



        <td>   
     <div style=""><img border="3"  
        src="<%=rs.getString("image") %>" height="200" width="200" /></div>   


        <p align="center"><%=rs.getString("title")%></p>
        <p align="center"><%=rs.getString("price")%></p> 

       </td>   


        <%        
            } //closing while loop bracket      
         }        
         else {        
             //if no record is found, simply display a no record message        
     %>        
         Nothing.        
         <%        
         }        
      %>     

       </table>
4

2 回答 2

1

除了来自 dcsohl 的响应之外，您还可以使用<div>和<span>元素的组合。一个<div>元素是一个块元素，也就是说，每个元素都<div>将在新行中呈现。 <span>element 是一个内联元素。

这应该可以帮助您：

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
于 2013-10-03T16:15:41.833 回答
1

使用<tr>标签按行组织表格。（这就是它所代表的 - *t*able *r*ow。）

跟踪您从数据库中读取了多少产品 (N)。如果 N 是 4 ( n % 4 == 0) 的倍数，则关闭<tr>并开始一个新的。

所以结果看起来像：

<table>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

更新基于更新的问题：

这是我根据您的代码进行的调整。我真的不提倡在 JSP 中进行 SQL 调用（或实际上任何非表示层代码），但这是另一个问题的问题。

<%   
    //1. Retrieve all products from database   

    //1a.  Load the Driver   
    Class.forName("com.mysql.jdbc.Driver");   
    //1b.  Get a connection to the database   
    Connection con = DriverManager.getConnection("url", "un", "pwd
    PreparedStatement ps = con.prepareStatement("SELECT * FROM table");   
    //1d.  Execute and retrieve our result   
    ResultSet rs = ps.executeQuery();   

    //2. Base on the results returned, construct a table   
%>   
</p>   

<table border="0">
  <tr>
   <%     

   int i = 0;
   if(rs.next()) {
   rs.beforeFirst();  // for making sure you dont miss the first record.      
     while(rs.next())      
       {                        // opening while loop brackets.
   %>

    <td>   
      <div style=""><img border="3"  
          src="<%=rs.getString("image") %>" height="200" width="200" /></div>   


      <p align="center"><%=rs.getString("title")%></p>
      <p align="center"><%=rs.getString("price")%></p> 

    </td>

    <%
      i++;
      if ((i % 4) == 0) {
    %>
        </tr>
    <%
      }

      if (!rs.isLast()) {  // don't open a new row if this is the last result
    %>
        <tr>
    <%
      }  // closing isLast check
    %>

    <%        
        } //closing while loop bracket      
     }        
     else {        
         //if no record is found, simply display a no record message        
 %>        
     Nothing.        
     <%        
     }        
  %>     
    </tr>

   </table>

我真的没有耐心纠正这里的空白，我还没有真正编译过这个，但希望你能明白要点。

于 2013-10-03T16:10:52.280 回答