如何正确显示table？

Question

我有一些数据，我想显示它。 telnumbers 和“teltype”必须位于其所有者的一栏中。

我有这个：

这是我的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:spring="http://www.springframework.org/tags"
     version="2.0">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <jsp:output omit-xml-declaration="yes"/>

    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>

    <h1>Contact list</h1>

    <c:if test="${not empty contacts}">
        <table>
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Birth Date</th>
                <th>tel_type</th>
                <th>tel_number</th>
                <th>hobby</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${contacts}" var="contact">
                <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/>
                <tr>
                <td>"${contact.firstName}"</td>
                <td>"${contact.lastName}"</td>
                <td>"${contact.birthDate}"</td>
                    <c:forEach items="${contact.contactDetails}" var="telDetail">
                        <jsp:useBean id="telDetail" scope="page" type="org.training.support.model.ContactTelDetail"/>
                            <td>"${telDetail.telNumber}"</td>
                            <td>"${telDetail.telType}"</td>
                    </c:forEach>
                    <c:forEach items="${contact.hobbies}" var="hobby">
                        <jsp:useBean id="hobby" scope="page" type="org.training.support.model.Hobby"/>
                            <td>"${hobby.id}"</td>
                    </c:forEach>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </c:if>
</div>

Answer 1

要使 table 正确显示，'th' 的数量必须与 'tr' 中的 'td' 的数量匹配，例如：

<table>
   <thead>
     <tr>
        <th>"Header 1"</th>
        <th>"Header 2"</th>
        <th>"Header 3"</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td> "Value1"</td>
       <td> "Value2"</td>
       <td> "Value3"</td>
     </tr>
   </tbody>

在你的情况下无法访问你的 tables 很难说，但因为你正在使用：

<c:forEach items="${contact.contactDetails}" var="telDetail">

给你的 td 比 6 多，因为在你的 # of headers 中可能是由于你的 table 中的值，检查你是否有空值或空值。尝试消除空值并在这些字段上留下单个 space " "，然后重试或用单个 for 循环替换多个 foreach，并通过其索引寻址每个数组。

例如：

<c:if test="${not empty contacts}">
    <table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Birth Date</th>
            <th>tel_type</th>
            <th>tel_number</th>
            <th>hobby</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach begin="0" end="${fn:length(contacts)}" var="i">
            <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/>
            <tr>
                <td>"${contacts[i].firstName}"</td>
                <td>"${contacts[i].lastName}"</td>
                <td>"${contacts[i].birthDate}"</td>
                <td>"${contact.contactDetails[i].telNumber}"</td>
                <td>"${contact.contactDetails[i].telType}"</td>
                <td>"${contact.hobbies[i].id}"</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</c:if>

确保您在页面顶部添加了 this 标签库以允许 fn 表示尺寸

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

Answer 2

我在这里添加了与您的解决方案相关的代码。请将以下标签添加到您的 JSP.

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

这里是变化

<h1>Contact list</h1>

<c:if test="${not empty contacts}">
    <table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Birth Date</th>
            <th colspan="${fn:length(contact.contactDetails)}">tel_type & tel_number</th>
            <th colspan="${fn:length(contact.hobbies)}">hobby</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${contacts}" var="contact">
            <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/>
            <tr>
            <td>"${contact.firstName}"</td>
            <td>"${contact.lastName}"</td>
            <td>"${contact.birthDate}"</td>
                <c:forEach items="${contact.contactDetails}" var="telDetail">
                    <jsp:useBean id="telDetail" scope="page" type="org.training.support.model.ContactTelDetail"/>
                        <td>"${telDetail.telType}" - "${telDetail.telNumber}"</td>                         
                </c:forEach>
                <c:forEach items="${contact.hobbies}" var="hobby">
                    <jsp:useBean id="hobby" scope="page" type="org.training.support.model.Hobby"/>
                        <td>"${hobby.id}"</td>
                </c:forEach>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</c:if>

结果如下图

如何正确显示table？

How to display table correctly?

html

java

jstl