0

以下に示すように、このJSP検索機能があります。

<%
String value=request.getParameter("search");
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://instance****.db.xeround.com:*****/mydb", "*****", "*******");
Statement st=conn.createStatement();
ResultSet rs = st.executeQuery("SELECT menu.name, menu.info, menu.price, restaurants.name from menu,"
        + " restaurants where restaurants_restaurantID=RestaurantID AND (menu.name like '%"
        + value
        + "%' "
        + "or menu.info like '%"
        + value
        + "%' or menu.category like '%"
        + value
        + "%' "
        + "or menu.kitchen like '%"
        + value
        + "%' or quick_choose like '%" + value + "%')");

while (rs.next()){ 
    %>
<tr><td>Name:</td><td><input type="text" value="<%=rs.getString("name")%>" > </td></tr>
<tr><td>Info:</td><td><input type="text" value="<%=rs.getString("info")%>" > </td></tr>
<tr><td>Price:</td><td><input type="text" value="<%=rs.getInt("price")%>" > </td></tr>
      <%
}
%>

これは機能しており、データベースから必要な情報を取得していますが、今やりたいことは、各結果行に 1 つの食品の名前/料理の説明/価格のみが表示されるように、結果を正しく並べることです。また、次のような上部ヘッダーで機能させたい:ここ

レストラン、料理、タイプ、価格というヘッダーの下に結果が表示される場所。これらのタイトルの下に正しく表示されるようにします。

そして、各行を行で分割します。facebook などで何かを検索すると、結果が細い線で区切られて表示されます。

上記のリンクと同じで、ここに示されています： この線

あまり読みたくない人のための要約: 基本的に、検索結果をこのサイトのようにしたい:ここでは、ヘッダーの下に異なる列に分割され、各検索結果を区切る行があります。

HTMLでこれに対する可能な解決策を知っている人はいますか? または、先に進む方法について何かアドバイスをいただけますか？いくつかの代替案を試しましたが、わかりません。ヘルプやガイダンスを本当に感謝します。どうもありがとう。

4

1 に答える 1

1

あなたに必要なhtml :

<table>
  <tr class="head">
    <td>Name:</td>
    <td>Info:</td>
    <td>Price:</td>
  </tr>    
<%
 while (rs.next()){ 
%>
  <tr class="content">
    <td class="name"><%=rs.getString("name")%></td>
    <td class="info"><%=rs.getString("info")%></td>
    <td class="price"><%=rs.getInt("price")%></td>
  </tr>
<%
 }
%>
</table>

そしておおよそのcss：

table {
    border-collapse: collapse;
}
.head td {
    text-align: center;
}
.content td {
    padding: 5px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #C0C0C0;
    border-bottom-style: dotted;
}
.info {
    background-color: #F1F4F6;
}

しかし、まず、スクリプトレットは非常に貧弱な方法です。第二に、JSP でのデータベース接続の取得が頭に浮かびます。JSP ページは表示のみを担当する必要があります。コードを別の Java クラスに置き換えます。そうしないと、コードが肥大化し、プロジェクトが読めなくなり、保守性が低下します。

JSTLを使用すると、同じビューを簡単に取得できます。

<c:forEach var="item" items="${requestScope.items}">
   <div id="item_title" class="item_title">
      <a href="${pageContext.request.contextPath}${item.url}">
        <c:out value="${item.title}" />
      </a>
   </div>
   <div id="item_content" class="item_content">
      <c:out value"${item.content}" />
   </div>
<c:forEach>

また

   <div id="item_title" class="item_title">
      <form name="openItem" action="handlerurl" method="post">
        <input type="hidden" name="itemId" value="${item.id}" />
        <c:out value="${item.title}" />
        <input type="submit" value="read more" />
      </form>
   </div>
于 2013-01-04T14:40:20.860 に答える