html - 如何使搜索结果显示在 1 个标题下的不同行和结构中

Question

所以我有这个 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>
      <%
}
%>

这是有效的并从数据库中提取我需要的信息，但我现在想做的是以某种方式使结果正确排列，因为每个结果行将仅显示名称/菜肴描述/价格一种食物。我也希望它可以使用如下所示的顶部 header :Here

结果显示在标题 Restaurant、Dish、Type、Price 下。以便它们在这些标题下正确显示。

然后每行用一条线分割。例如在 facebook 上，当你去搜索一些东西时，结果将被显示并用一条细线分隔。

与上面的链接相同，此处显示:

给那些不想看太多书的人总结:我基本上希望我的搜索结果像这个网站:Here ，在分为不同列的标题下，并用一行分隔每个搜索结果。

你们中有人知道在 HTML 中对此有任何可能的解决方案吗？或者可以给我任何关于如何进行的建议吗？我已经尝试了几种选择，但我就是想不通。真的很感激任何帮助或指导。太感谢了。

Answer 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;
}

但首先，scriptlets 是非常糟糕的做法。其次，JSP中获取数据库连接是一记重中之重。您的 JSP 页面应该只负责查看。将您的代码替换为单独的 Java 类。否则，当您的代码膨胀时，您的元素将不可读且难以维护。

使用 JSTL您可以轻松获得相同的 View :

<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>