如何在jsp中显示包含从数据库返回的所有行的html表?

时间:2013-07-29 14:31:32

标签: java html html5 jsp jstl

我有html和java代码,在html表格中显示一行。

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
            <%
                Object object = request.getAttribute("myContact");
                MyModel myModel = (MyModel)object;

                String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
                String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
                String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
            %>

            <tr>
            <td class="table-border-bottom"><label for="name">Name:</label></td>
            <td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
            </td>
            <td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
            <td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

            </td>
            <td class="table-border-bottom"><label for="mail">Email:</label></td>
            <td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

            </td>
            </tr>


            <tr align="center">
            <td valign="bottom" colspan="6" style="height: 45px; ">
            <input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
            <input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
            </tr>

      </table>   

我从数据库中获取一行并保留在请求范围内然后我在jsp中访问它并在html表中显示如上所示。它运作良好,没有任何问题。现在问题是我从数据库获取行列表,我需要在html中显示多行。此外,我必须为行的每个组件分配唯一的ID,并且还需要如上所述应用CSS styes。在这种情况下,如何重复循环中的逻辑以正确显示具有css样式的行列表?

谢谢!

3 个答案:

答案 0 :(得分:1)

如果您的MyModel类具有bean样式的getter:

public String getMail() {
   return this.mail;
}

您应该使用${myContact.mail}之类mail来检索<c:out value="${myContact.mail}">属性的值。

最好使用ELList<MyModel>代码来避免JSTL


如果要显示request,请将其设置在Servlet中的request.setAttribute("myModelsList",myModelsListObject); 范围内,该范围将请求转发给JSP。

<forEach>

然后使用JSTL的List循环迭代<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> ... <table> <c:forEach items="${myModelsList}" var="myModel" varStatus="count"> <tr id="${count.index}"> <td>${myModel.mail}</td> <td>${myModel.title}</td> <td>${myModel.name}</td> </tr> </c:forEach> </table> 的每个元素并显示它。

{{1}}

另请阅读:

  1. cross-site scripting
  2. How to avoid Java Code in JSP-Files?
  3. Use JSTL forEach loop's varStatus as an ID

答案 1 :(得分:1)

不是从服务器代码发送一个对象,而是发送要显示为行列表的对象列表。

我没有经过测试,请注意处理无效检查。

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
            <%
                List<Object> object = (List<Object>)request.getAttribute("myContact");
        for(int i=0;i<object.size();i++){
                MyModel myModel = (MyModel)object.get(i);
                String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
                String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
                String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
            %>


            <tr>
            <td class="table-border-bottom"><label for="name">Name:</label></td>
            <td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
            </td>
            <td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
            <td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

            </td>
            <td class="table-border-bottom"><label for="mail">Email:</label></td>
            <td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

            </td>
            </tr>

    <% } %>

            <tr align="center">
            <td valign="bottom" colspan="6" style="height: 45px; ">
            <input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
            <input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
            </tr>

      </table>   

此外,通过使用JSTL而不是使用scriptlet对您有所帮助。

对于行的样式,请应用类

CSS

.rowClass{
  /* APPLY STYLE TO ROWS */
}

答案 2 :(得分:0)

相反,只需一个联系人对象,您就可以将List<Contact>设置为请求属性。

List<Contact> myContacts = (List<Contact>) request.getAttribute("myContacts");

然后只需使用带有Iterator循环的while

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
<%
    List<Contact> myContacts = (List<Contact>) request.getAttribute("myContacts");

    Iterator<Contact> contacts = myContacts.iterator();
    while (contacts.hasNext()) {
      Contact myModel = contacts.next();

      String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
      String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
      String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
%>

<tr>
<td class="table-border-bottom"><label for="name">Name:</label></td>
<td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
</td>
<td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
<td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

</td>
<td class="table-border-bottom"><label for="mail">Email:</label></td>
<td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

</td>
</tr>

<% } // close loop
 %>

<tr align="center">
<td valign="bottom" colspan="6" style="height: 45px; ">
<input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
<input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
</tr>

</table>