行の表示・非表示を切り替えたいので、以下のように実装してみた。
┌───┬──────────────────────────────────┐
│ 表示 │$('tr').css('display', 'block');                                    │
├───┼──────────────────────────────────┤
│非表示│$('tr').css('display', 'none');                                     │
└───┴──────────────────────────────────┘

ところが、IEではうまくいくのに、FirefoxやChromeだと
再表示(非表示→表示)の時にテーブルイメージが崩れてしまう。
どうも、再表示時に、元に戻るのではなく、
下の階層に追加されるような感じになっているっぽい(よくわからんが)。

困ったなと思ったところ、jQueryではこれらへの対応がなされているらしく、
以下で代替したら、想定通り再表示時に元に戻った。
┌───┬──────────────────────────────────┐
│ 表示 │$('tr').show();                                                     │
├───┼──────────────────────────────────┤
│非表示│$('tr').hide();                                                     │
└───┴──────────────────────────────────┘

ちなみに、「A」属性の行を非表示にするチェックボックスは以下のようになる。
┌──────────────────────────────────────┐
│$('#notA').click(function() {                                               │
│  if ($(this).prop('checked')) {                                            │
│    $('tr.A').hide();                                                       │
│  } else {                                                                  │
│    $('tr.A').show();                                                       │
│  }                                                                         │
│});                                                                         │
└──────────────────────────────────────┘