同じ内容のセルを結合するjQuery

前提・実現したいこと

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

試したこと

隣り合うセルが同じ値なら、内容を削除する・・・とか
値を配列に入れてみたりとか・・・色々試したのですが
うまくいきません。。。
実現方法でも、ヒントでもなんでもいいので教えてください。。。。

yambejp

2019/06/04 00:24

結合するということはcolspanがしていされるということですか？

xx_6_6_xx

2019/06/04 00:26

そうです！横に結合したいです。。

m.ts10806

2019/06/04 00:30

元のデータは何で取得されていますか？ HTMLべた書きでしょうか、それともPHPなどサーバーサイドの言語から取得したものでしょうか

xx_6_6_xx

2019/06/04 00:34

データベースから取得した値でYY/MMの部分を表示し、それに応じて、YY上期、YY下期、YY年度を判断し、表示しています。。（実際のコードを質問に書く方が、スムーズにご回答頂けるのかもしれませんよね；；申し訳ありません。。。）

m.ts10806

2019/06/04 00:36

はい。あとからJavaScriptでなんとかするのではなく、「データベースから取得した値でYY/MMの部分を表示」のときにそのように組むべきと思います。

xx_6_6_xx

2019/06/04 00:38

ですよね、、、すみません、、そこも考えてみます。。。ありがとうございます。。。！

行動規範の内容に同意します

回答4件

ベストアンサー

冗長に処理してみました

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

yambejp

総合スコア114883

xx_6_6_xx

2019/06/04 01:26 編集

コードまで書いて頂きありがとうございます…！完璧に思い描いていた通りになりました…！本当に本当に助かりました。。。ありがとうございます…！ただ、これは何がどうなっているのか、もし差支えなければ解説をお願いしたいです。。。質問ばかりで本当にすみません；お願い致します。。

yambejp

2019/06/04 01:31

each内の最後の2行をコメントアウトしてみてください最初のwhileで、各tdを右方向に検索して同じテキストだった場合 data-colspanという属性をインクリメントしています。次のwhileで、各tdを左方向に検索して同じテキストだった場合 data-delという属性を設定しています。（先程コメントアウトした）最後の2行で、data-del属性のtdを削除し data-colspan属性のtdにcolspanを設定しつつdata-colspan属性を消去しています

xx_6_6_xx

2019/06/04 01:37

早速のご回答ありがとうございます…！解説も大変理解できました。。。！発想した通りの挙動を実現頂けて、本当にありがたいです。。。今後も、同じようなことがあるかと思うので、活用させて頂きます。。。！！ご丁寧に回答いただき、本当にありがとうございました。。。！

yambejp

2019/06/04 04:34

x_xさんのコードを見ていて思い至りましたが trでループ処理をかけないと行の１番最後のtdと次の行の１番最初のtdが同じtextだったとき挙動がおかしくなりますね。遅ればせながらあとで修正版を上げておきます

行動規範の内容に同意します

ちゃんと実装しようとすると簡単ではありません(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

x_x

総合スコア13749

xx_6_6_xx

2019/06/04 04:18

ご回答ありがとうございます！確かにもっともっと複雑な表になると、わけわからなくなってきそうですね・・・そこで同じようなことをしようと思うとまた悩むことになりそうです。。。

行動規範の内容に同意します

表の結合、舐めてました。難しい。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  };