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属性を変更すれば目的通りの動作はしますが、手間がかかります。

Major 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行結合された状態になります。

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