ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript テーブルのrowspanを動的に変更する方法

スポンサーリンク

テーブルで表示している内容を、ラジオボタンの操作でテーブルのrowspanを変更して表示しなければならなくなりました。

下のテーブルのように、あるときは2行を結合、あるときは3行を結合します。

列1 列2
列1のデータ1 列2のデータ1
列2のデータ2
列1のデータ3 列2のデータ3

列1 列2
列1のデータ1 列2のデータ1
列2のデータ2
列2のデータ3

jQueryなら簡単にrowspan属性を変更可能

JavaScriptでできるのかと検索したら、以下のページが見つかりました。
alphasis.info
こちらのサンプルを真似して、テーブルのrowspan属性を変更すれば目的通りの動作はしますが、手間がかかります。

パソコンで仕事中
unsplash-logoMajor Tom Agency

jQueryでできないかと検索したら、attr()でrowspanを変更できるとありましたので、試してみました。

rowspan属性を変更したいセルのidが以下のようになっていれば、

  <td rowspan="2" id="column">列1のデータ1</td>

2行を結合する場合は、最初の例では「列1のデータ3」のセルの表示した後に、

  $("#column").attr("rowspan", 2);

を行えば2行結合された状態になります。

3行を結合する場合は、最初の例では「列1のデータ3」のセルの表示を消した後に、

  $("#column").attr("rowspan", 3);

を行えば3行結合された状態になります。


最初はできるのかな?と心配になりましたが、目的通りの動作ができました。