HTMLで、縦方向に結合したセルを持つ行を、非表示にする方法

以下のような、縦方向に結合したセルを持つテーブルがあるとします。

original.html

<table>
    <thead>
        <tr>
            <th>県</th><th>市</th><th>人口[千人]</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <th rowspan="3">愛知県</th><td>名古屋市</td><td>2200</td>
    </tr>
    <tr>
        <td>一宮市</td><td>300</td>
    </tr>
    <tr>
        <td>岡崎市</td><td>300</td>
    </tr>
    </tbody>
</table>

style.css

    table, tr, td, th {
        border:solid 1px;
        border-collapse:collapse;
    }

この表から「岡崎市」の行を一時的にJavaScriptで非表示にするには、どうすればいいでしょうか？
なお、「一時的に非表示」なので、「岡崎市」の行そのものを削除するのは、なしです。

方法は2つあります。
おすすめは2つ目です。

方法1: 非表示にしたい行のtr要素を非表示

まず最初に思いつくのが、tr要素の非表示だと思います。
tr要素をdisplay:none;で非表示にします。
これだけではrowspanの値が矛盾してしまっているので、rowspan属性の値も3から2に変更します。

modify1.html

    <tbody>
    <tr>
        <th id="aichiHead" rowspan="2">愛知県</th><td>名古屋市</td><td>2200</td>
    </tr>
    <tr>
        <td>一宮市</td><td>300</td>
    </tr>
    <tr class="hidden" style="display:none;">
        <td>岡崎市</td><td>300</td>
    </tr>
    </tbody>

modify1.js

/** 非表示対象の行を非表示にする OR 表示する */
function hideRow(hide) {
  if(hide) { //非表示
    $("table tr.hidden").css("display", "none");
    $("#aichiHead").attr("rowSpan", 2);
  } else { //表示
    $("table tr.hidden").css("display", "");
    $("#aichiHead").attr("rowSpan", 3);    
  }
}

この方法の問題点は、rowspan属性の値を変更しなくてはならないことです。
非表示にしたい行の数、元の表の行数が変わるたびに、非表示処理のjsのソースコードを修正する必要があります。
jsで、「表示されている行数を数えて、rowspan属性値を変更する」ことも可能ですが、若干面倒です。

方法2: 非表示にしたい行のtd要素を非表示

tr要素を非表示にするのでなく、非表示対象行内の全てのtd要素を非表示にして、実現することもできます。

modify2l.html

    <tbody>
    <tr>
        <th id="aichiHead" rowspan="3">愛知県</th><td>名古屋市</td><td>2200</td>
    </tr>
    <tr>
        <td>一宮市</td><td>300</td>
    </tr>
    <tr class="hidden">
        <td style="display:none;">岡崎市</td><td style="display:none;">300</td>
    </tr>
    </tbody>

modify2.js

/** 非表示対象の行を非表示にする OR 表示する */
function hideRow(hide) {
  if(hide) { //非表示
    $("table tr.hidden > td").css("display", "none");
  } else { //表示
    $("table tr.hidden > td").css("display", "");
  }
}

表示結果は同じです。
ポイントはrowspan属性値を修正する必要がないことです。
非表示したい行が変わったときは、HTMLのtr要素のhiddenクラスを変更するだけでよく、jsを修正する必要はありません。

まとめ

rowspan属性は、tr要素の表示/非表示に影響し、td要素の表示/非表示には影響しない。