Q&A
結合するということはcolspanがしていされるということですか？
前提・実現したいこと
tableのtdが同じ内容の場合、結合したいです。。
| 18年度 | 18年度 | 19年度 | 19年度 | 19年度 | 19年度 | 19年度 | 19年度 |
|---|---|---|---|---|---|---|---|
| 18下期 | 18下期 | 19上期 | 19上期 | 19上期 | 19上期 | 19上期 | 19上期 |
| 18/11 | 18/12 | 19/01 | 19/02 | 19/03 | 19/04 | 19/05 | 19/06 |
こういうテーブルを
↓こうしたいです。。
(質問入力画面の表で結合の仕方がわからなかったので、
空白セル残してるようにみえますが、
空白の部分は全部結合されてるとしてください。。。）
| 18年度 | 19年度 | ||||||
|---|---|---|---|---|---|---|---|
| 18下期 | 19上期 | ||||||
| 18/11 | 18/12 | 19/01 | 19/02 | 19/03 | 19/04 | 19/05 | 19/06 |
試したこと
隣り合うセルが同じ値なら、内容を削除する・・・とか
値を配列に入れてみたりとか・・・色々試したのですが
うまくいきません。。。
実現方法でも、ヒントでもなんでもいいので教えてください。。。。
そうです！横に結合したいです。。
元のデータは何で取得されていますか？
HTMLべた書きでしょうか、それともPHPなどサーバーサイドの言語から取得したものでしょうか
データベースから取得した値でYY/MMの部分を表示し、
それに応じて、YY上期、YY下期、YY年度を判断し、表示しています。。
（実際のコードを質問に書く方が、スムーズにご回答頂けるのかもしれませんよね；；
申し訳ありません。。。）
はい。あとからJavaScriptでなんとかするのではなく、
「データベースから取得した値でYY/MMの部分を表示」のときにそのように組むべきと思います。
ですよね、、、すみません、、そこも考えてみます。。。
ありがとうございます。。。！
回答4件
0
ベストアンサー
冗長に処理してみました
javascript
1<script> 2$(function(){ 3 $('#t1 td').each(function(){ 4 var self=$(this); 5 var txt=$(this).text(); 6 var c=0; 7 while($(this).nextAll().eq(c).is(function(){return $(this).text()==txt})){ 8 c++; 9 self.attr('data-colspan',c+1); 10 }; 11 c=0; 12 while($(this).prevAll().eq(c).is(function(){return $(this).text()==txt})){ 13 c++; 14 self.attr('data-del',1); 15 }; 16 }); 17 $('[data-del]').remove(); 18 $('[data-colspan]').attr('colspan',function(){return $(this).data('colspan');}).removeAttr('data-colspan'); 19}); 20</script> 21 22<table border id="t1"> 23<tr><td>18年度</td><td>18年度</td><td>19年度</td><td>19年度</td><td>19年度</td><td>19年度</td><td>19年度</td><td>19年度</td></tr> 24<tr><td>18下期</td><td>18下期</td><td>19上期</td><td>19上期</td><td>19上期</td><td>19上期</td><td>19上期</td><td>19上期</td></tr> 25<tr><td>18/11</td><td>18/12</td><td>19/01</td><td>19/02</td><td>19/03</td><td>19/04</td><td>19/05</td><td>19/06</td></tr> 26</table> 27
投稿2019/06/04 01:10
総合スコア118203
コードまで書いて頂きありがとうございます…！
完璧に思い描いていた通りになりました…！
本当に本当に助かりました。。。ありがとうございます…！
ただ、これは何がどうなっているのか、もし差支えなければ解説をお願いしたいです。。。
質問ばかりで本当にすみません；お願い致します。。
each内の最後の2行をコメントアウトしてみてください
最初のwhileで、各tdを右方向に検索して同じテキストだった場合
data-colspanという属性をインクリメントしています。
次のwhileで、各tdを左方向に検索して同じテキストだった場合
data-delという属性を設定しています。
（先程コメントアウトした）最後の2行で、data-del属性のtdを削除し
data-colspan属性のtdにcolspanを設定しつつdata-colspan属性を
消去しています
早速のご回答ありがとうございます…！
解説も大変理解できました。。。！
発想した通りの挙動を実現頂けて、本当にありがたいです。。。
今後も、同じようなことがあるかと思うので、
活用させて頂きます。。。！！
ご丁寧に回答いただき、本当にありがとうございました。。。！
x_xさんのコードを見ていて思い至りましたが
trでループ処理をかけないと行の１番最後のtdと
次の行の１番最初のtdが同じtextだったとき
挙動がおかしくなりますね。
遅ればせながらあとで修正版を上げておきます
0
ちゃんと実装しようとすると簡単ではありません(rowSpanがあったりとか、ほかの属性とか)。単純かつ隣接する行を見ないという条件で処理するなら次のようになるかと思います。
jQuery
1$('tr').each(function(index, tr) { 2 for (let i = tr.cells.length - 1; i > 0; i--) { 3 if (tr.cells[i].innerHTML === tr.cells[i - 1].innerHTML) { 4 tr.cells[i - 1].colSpan = tr.cells[i].colSpan + 1; 5 $(tr.cells[i]).remove(); 6 } 7 } 8});
投稿2019/06/04 01:41
総合スコア13749
ご回答ありがとうございます！
確かにもっともっと複雑な表になると、わけわからなくなってきそうですね・・・
そこで同じようなことをしようと思うとまた悩むことになりそうです。。。
0
表の結合、舐めてました。難しい。4時間もかかってしまいました。笑。皆さんのコードのほうが素晴らしかった。。。
view
1table 2 thead 3 tr 4 td 18年度 5 td 18年度 6 td 19年度 7 td 19年度 8 td 19年度 9 td 19年度 10 td 19年度 11 td 19年度 12 tbody 13 tr.quarter 14 td 18下期 15 td 18下期 16 td 19上期 17 td 19上期 18 td 19上期 19 td 19上期 20 td 19上期 21 td 19上期 22 tr 23 td 18/11 24 td 18/12 25 td 19/01 26 td 19/02 27 td 19/03 28 td 19/04 29 td 19/05 30 td 19/06
javascript
1 let thead_td = document.querySelectorAll("thead td"), 2 tbody_td = document.querySelectorAll("tbody tr.quarter td"), 3 t_text = {}, 4 counts = {}; 5 textCount(thead_td); 6 let thead = document.querySelector("thead"); 7 textSpan(thead, counts); 8 9 textCount(tbody_td); 10 let tbody = document.querySelector("tbody tr.quarter"); 11 textSpan(tbody, counts); 12 13 function textSpan(par,text){ 14 let td = []; 15 while (par.firstChild) { 16 par.removeChild(par.firstChild); 17 }; 18 for (let i = 0; i < Object.keys(text).length; i++) { 19 td[i] = document.createElement("td"); 20 td[i].setAttribute('colSpan', Object.values(text)[i]); 21 td[i].textContent= Object.keys(text)[i]; 22 par.appendChild(td[i]); 23 }; 24 }; 25 function textCount( text ){ 26 t_text = {}; 27 counts = {}; 28 for (let i = 0; i < text.length; i++) { 29 t_text[i] = text[i].textContent; 30 let key = t_text[i] 31 counts[key] = (counts[key])? counts[key] + 1 : 1 ; 32 }; 33 };
投稿2019/06/04 04:14
総合スコア197
ご回答ありがとうございます！！
4時間も…！恐れ入ります…！
私はきっとこんなに沢山コード書こうとするとぐちゃぐちゃになりそうなので、
綺麗なコードとても尊敬します。。。
ご回答頂いた中に、知らないコードが結構あるので、勉強させていただきます；；！
ありがとうございます；；！
ご回答ありがとうございます！
こんなのがあるのですね…！
jQueryで動的に結合してくれるとなるととても助かります。。。
次はテーブル画面考える段階で、これを活用できないか考えたいと思います・・・！
あなたの回答
tips
プレビュー
