2017-05-08 21 views
0

データがあり、表示したい。 telnumbersと'teltype`は所有者の1つの列になければなりません。表を正しく表示する方法は?

私はこれがあります。

enter image description here

と、この私のコード: '目' の数が一致する必要が適切に表示するための表について

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

+0

各データのためにTDを使用しないでください以下になりますです。 2 td –

+0

を使用する代わりにいくつかの区切り文字を使用してくださいこれはあなたに役立つと思います。 「2列にまたがるセル」を確認します。 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span助けてくれないともう一度尋ねてください –

+0

申し訳ありませんが、私はランダムなcolspanを私の例(この良い例ですが、私の場合は動作しません。contact.contactDetails.size()が定義されていません(ランダム)( –

答えて

1

ここではサイズのためにFNを許可するようにページの上部にこのタグライブラリを追加しましたあなたの解決策。 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> 

そして結果は画像

Example result

+0

ああ、これはもっと良い。私はこのようなものを探していた –

0

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

あなたのテーブルにアクセスもしなくても伝えるのは難しいですが、あなたが使用しているので、:

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

あなたに多分起因して、ヘッダーのあなたの#のように6以上のTDを与えていますあなたのテーブルの値は、空の値かヌル値かをチェックします。これらのフィールドにヌル値を取り除き、それらのフィールドに1つの空白を残してみて、複数のforeachを1つのforループでやり直したり置き換えたりして、インデックスごとにすべての配列を指定してください。例えば

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

ていることを確認してください、あなたは私がに関連するコードを追加した

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

あなたは私があなたが何を意味するかを助けることができますか?私はいくつかの例をしようとしましたが、失敗しました( –

+0

私はあなたのコレクションやテーブルを持っていないとして私はそれをテストすることができないどのように私が提案していたの例を追加しましたが、私に知らせてください、私はちょうど助けようとしています – AbelSurace

+0

ああ私の神)私は
)を)忘れて)しかし、ありがとう) –

関連する問題