Home > Javascript > javascript(jQuery)でテーブルのrowspanを動的に設定・変更する

javascript(jQuery)でテーブルのrowspanを動的に設定・変更する

公開日:

最終更新日:

テーブルをソートした時にtdのrowspanの数字を自動的に書き換えれる様にしなさいという事でしたので、その覚え書きです。
「縦のセルの連結はなくてもいいんじゃないですか?」「ヤダ!!」っていうやりとりがあったのです。はい。
まあ、割と使い方が限定される感じですが、これをベースに色々できるかも。と思っとります。はい。

どうゆう事?なのでサンプルです。

以下にデモを用意してます。
一番右のセルが縦に繋がってるのです。はい。
その数が変わっても繋がってるのです。はい。

種類 名前 生息地

コード

HTML

CSS

Javascript(jQuery)

解説

tableDataはJSON形式の配列です。はい。

んで、☝がそれをテーブルに書き出す関数です。はい。
class名で判断するので、繋げたい一番右のセルにclassを振ってます(繋げたいやつは同じclassです)。はい。
次からが本題です。はい。

☝で、一番右のセルのclassを全部取ってきて、aという配列に入れてます。はい。

☝で、同じclassの数をカウントしてます。はい。
これは「JavaScriptで配列の重複している項目の数をカウントする
を参考にさせて頂きました。はい。
世の中には賢い人がいるもんですね。はい。
keyにはとってきたclass名が入ってます。
なので、class名があれば+1をして、なければ1をcounts配列のkeyに代入するんですね。はい。
賢いですね。はじめ見た時「んっ?」てなりました。はい。
ありがとうございます。

☝で、classなので「.」を付けて、そのclassのあるセルの一番目以外を消して、
一番目にrowspan=”数えた数”を入れてます。はい。

いや~しかし~使う事~あるんでしょうか~
そして~説明~下手ですね~
すみません~
もっと~上手いこと~
もっと~自動な感じで~
できそうな~気がするん~で~すが~
思い~つかない~ので~
思い~ついたら~修正~しますね~
てか~教えて~ください~ね~

あっ
ちなみに、JSONデータはエクセルから書き出せるマクロを書いてくれてる
素晴らしい方がいらっしゃいましたので、リンクしときます。はい。
ExcelのテーブルをJSON形式に変換するマクロ

Comment

よろしければコメントをどうぞ