質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Java EE

Java EE(Java Enterprise Edition)はJavaベースのテクノロジーとその相互運用の仕様をまとめたものです。サーバとクライアントのアーキテクチャを規定し、特定アプリケーションのクラス用に定義されたテクノロジー設定のプロファイルを使用します。

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2080閲覧

JAVAEE JS XHTML 表の表現、セルの結合について

退会済みユーザー

退会済みユーザー

総合スコア0

Java EE

Java EE(Java Enterprise Edition)はJavaベースのテクノロジーとその相互運用の仕様をまとめたものです。サーバとクライアントのアーキテクチャを規定し、特定アプリケーションのクラス用に定義されたテクノロジー設定のプロファイルを使用します。

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2016/07/04 02:27

編集2016/07/04 05:32

###前提・実現したいこと
JAVAEEにてデータベースからSELECTしてきたデータをWebページ上に一覧で表示できたのですが、
表示したセルの上下で同じ値の入っているセルを結合し一つにまとめたいです。

ロジック的には Aセル内の値と のAセル直下のセル内の値が同値のときに
セルを結合し1つにまとめるといった感じです。

###該当のソースコード
xhtmlファイル

xhtml

1<h:body> 2 <h:form prependId="false"> 3 <table class="List" id="ListTable" border="1" > 4 <tr> 5 <th class="Fix" rowspan="2">A</th> 6 <th class="Fix" rowspan="2">B</th> 7 <th class="Fix" rowspan="2">C</th> 8 <th class="Fix" rowspan="2">D</th> 9 <th class="Fix" rowspan="2">E</th> 10 <th class="Flex" rowspan="2">F</th> 11 <th class="Flex" colspan="2">G</th> 12 <th class="Flex" rowspan="2">H</th> 13 <th class="Fix" rowspan="2">I</th> 14 <th class="Fix" rowspan="2">K</th> 15 </tr> 16 <tr> 17 <th class="Flex">From</th> 18 <th class="Flex">To</th> 19 </tr> 20 <ui:repeat var="row" value="#{mainListBean.goallist}"> 21 <tr> 22 <td> 23 <h:outputLabel value="#{row.str003}"/> 24 </td> 25 <td> 26 <h:outputLabel value="#{row.str004}"/> 27 </td> 28 <td> 29 <h:outputLabel value="#{row.str005}"/> 30 </td> 31 <td> 32 <h:outputLabel value="#{row.str006}"/> 33 </td> 34 <td> 35 <h:outputLabel value="#{row.str007}"/> 36 </td> 37 <td> 38 <h:outputLabel value="#{row.str008}"/> 39 </td> 40 <td> 41 <h:outputLabel value="#{row.str009}"/> 42 </td> 43 <td> 44 <h:outputLabel value="#{row.str010}"/> 45 </td> 46 <td> 47 <h:outputLabel value="#{row.str011}"/> 48 </td> 49 <td> 50 <h:outputLabel value="#{row.str012}"/> 51 </td> 52 <td> 53 <h:outputLabel value="#{row.str013}"/> 54 </td> 55 </tr> 56 </ui:repeat> 57 </table> 58 <br/> 59 <br/> 60 <a href="LoginPage.xhtml">ログアウト</a> 61 </h:form> 62 </h:body>

javascriptファイル

javascript

1$(document).ready(function(){ 2  $('#ListTable').each(function () { 3 var pre_element = null; 4 var col_num = 0; 5 $(this).find('tr').each( 6 function () { 7 var now_th = $(this).find('td').eq( col_num ); 8 if (pre_element === null) { 9 pre_element = now_th; 10 } else if (now_th.text() === pre_element.text()) { 11 now_th.remove(); 12 if (pre_element.attr('rowspan') === null) 13 pre_element.attr('rowspan', 1); 14 pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); 15 } else { 16 pre_element = now_th; 17 } 18 }); 19  }); 20}); 21

上記javascriptファイルのを使用したのですが、どうしても思うようにセルが結合されません。
結合されるセルもありますが、結合されたセルのある列が左に1セル分ずれてしまします。
画面状況

よろしく願いいたします。

BlueMoon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

少し汚いですが、javaScriptにて解決いたしました。

javaScript

1$(document).ready(function(){ 2  $('#ListTable').each( 3 function () { 4 5 unit(); 6 7 item(); 8 9 goal(); 10 11  }); 12}); 13 14function unit() { 15 var h = 1; 16 var i = 0; 17 var cnt = 1; 18 var setCell = 0; 19 var tblTbody = document.getElementById('ListTable'); 20 var td = tblTbody.getElementsByClassName('unit').length; 21 var td1 = tblTbody.getElementsByClassName('unit')[i].innerHTML; 22 for(i = 1, rowLen = td; i < rowLen; i++){ 23 var td2 = tblTbody.getElementsByClassName('unit')[i].innerHTML; 24 25 if(td1 === td2){ 26 cnt++; 27 } else { 28 29 joinUnit(i, cnt, tblTbody, setCell); 30 31 setCell++; 32 cnt = 1; 33 td1 = td2; 34 i = setCell; 35 rowLen = tblTbody.getElementsByClassName('unit').length; 36 } 37 38 } 39 40 joinUnit(i, cnt, tblTbody, setCell); 41 42} 43 44function joinUnit(i, cnt, tblTbody, setCell){ 45 46 for(var j = i-1; j >= i-cnt+1; j--){ 47 var delTd = tblTbody.getElementsByClassName('unit0')[j]; 48 delTd.parentNode.removeChild(delTd); 49 } 50 51 var td3 = tblTbody.getElementsByClassName('unit0')[setCell]; 52 td3.rowSpan = cnt; 53 54} 55 56function item() { 57 var h = 1; 58 var i = 0; 59 var cnt = 1; 60 var setCell = 0; 61 var tblTbody = document.getElementById('ListTable'); 62 var td = tblTbody.getElementsByClassName('item').length; 63 var td1 = tblTbody.getElementsByClassName('item')[i].innerHTML; 64 for(i = 1, rowLen = td; i < rowLen; i++){ 65 var td2 = tblTbody.getElementsByClassName('item')[i].innerHTML; 66 67 if(td1 === td2){ 68 cnt++; 69 } else { 70 71 joinItem(i, cnt, tblTbody, setCell); 72 73 setCell++; 74 cnt = 1; 75 td1 = td2; 76 i = setCell; 77 rowLen = tblTbody.getElementsByClassName('item').length; 78 } 79 80 } 81 82 joinItem(i, cnt, tblTbody, setCell); 83 84} 85 86function joinItem(i, cnt, tblTbody, setCell){ 87 88 for(var j = i-1; j >= i-cnt+1; j--){ 89 var delTd = tblTbody.getElementsByClassName('item0')[j]; 90 delTd.parentNode.removeChild(delTd); 91 } 92 93 var td3 = tblTbody.getElementsByClassName('item0')[setCell]; 94 td3.rowSpan = cnt; 95 96} 97 98function goal() { 99 var h = 1; 100 var i = 0; 101 var cnt = 1; 102 var setCell = 0; 103 var tblTbody = document.getElementById('ListTable'); 104 var td = tblTbody.getElementsByClassName('goal').length; 105 var td1 = tblTbody.getElementsByClassName('goal')[i].innerHTML; 106 for(i = 1, rowLen = td; i < rowLen; i++){ 107 var td2 = tblTbody.getElementsByClassName('goal')[i].innerHTML; 108 109 if(td1 === td2){ 110 cnt++; 111 } else { 112 113 joinGoal(i, cnt, tblTbody, setCell); 114 115 setCell++; 116 cnt = 1; 117 td1 = td2; 118 i = setCell; 119 rowLen = tblTbody.getElementsByClassName('goal').length; 120 } 121 122 } 123 124 joinGoal(i, cnt, tblTbody, setCell); 125 126} 127 128function joinGoal(i, cnt, tblTbody, setCell){ 129 130 for(var j = i-1; j >= i-cnt+1; j--){ 131 var delTd1 = tblTbody.getElementsByClassName('goal0')[j]; 132 var delTd2 = tblTbody.getElementsByClassName('from0')[j]; 133 var delTd3 = tblTbody.getElementsByClassName('to0')[j]; 134 delTd1.parentNode.removeChild(delTd1); 135 delTd2.parentNode.removeChild(delTd2); 136 delTd3.parentNode.removeChild(delTd3); 137 } 138 139 var td3 = tblTbody.getElementsByClassName('goal0')[setCell]; 140 var td4 = tblTbody.getElementsByClassName('from0')[setCell]; 141 var td5 = tblTbody.getElementsByClassName('to0')[setCell]; 142 td3.rowSpan = cnt; 143 td4.rowSpan = cnt; 144 td5.rowSpan = cnt; 145 146}

投稿2016/07/06 04:47

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問