Programmingテーブルの行(TR要素)をスライドで表示切替させる方法(2)前回はサンプルだけ提示しましたが、今回はそのソースコードを解説します。念のため、対応ブラウザこのページのサンプルは、下記ブラウザで確認しました。v10.5.6)jQueryのバージョンは、1.3.2です。CSSでもいくつか注意すべきところがあります。概要は以下の通りです。各セル内部をdivで囲み、divをスライドさせるようにする。セルのパディング(cellpaddingまたはCSSのpaddingプロパティ)は0pxにする。セルのパディングを0にした分、セル内部のdivにパディングを指定する。非表示前後の行の高さをそろえるため、heightプロパティを指定する。表示状態のdisplayプロパティを、table-rowにする。スライド終了とほぼ同時に、行を非表示に切り替える。非表示この行が対象sampleこの行はダミーまずはHTMLの組み直しサンプルで使用するテーブルは、修正前は下記のようなコードになっています。</tr>tr要素をスライドしても、td要素をスライドしても上手くいかないので、内部にdivをはめ込みます(ポイント1)。cell02)をスライドさせてもある程度上手くいきますが、微妙に動きがカクカクしてしまいます。非表示この行が対象sampleこの行はダミーこれはtd要素側のパディングが原因で、分かり易く図示すると、次のような感じになります。上図の黄色い部分がスライドアニメーションされて徐々に高さが減るのですが、最後にtd要素のパディング部分(図では背景が薄い赤の部分)が残って、その後で行全体が非表示になるので、残った部分が一気に消えて、全体としてカクカクした動きになるようです。これを回避するために、td要素側のパディングを0にし(ポイント2)、減らした分のパディングを(修正前と見た目が変わらないように)div側に割り当てます(ポイント3)。パディングの数値は、元の画面デザインに合わせます。プロパティを指定していますが、これを指定する事で、一旦非表示にして表示に戻した際の、行の高さを同じにします(ポイント4)。これもデザインに合わせて適宜数値は変えます。jQueryのslideUp()メソッドでは、最終的にdivが非表示になった際にこのdisplayプロパティがnoneに、slideDown()メソッドではdisplayプロパティがblockになってまして、table-rowは適用されません。前回のサンプルで、tr要素をそのままスライドした場合に、Firefoxでは一旦行全体が左端のセルに収まってからスライドし、表示時には左端のセルに収まったままの状態になっていましたが、それはこのdisplayプロパティの値が原因と思われます。table-rowを適用するようにしておきます。IE7ではサポートされていないようで、エラーが発生します。IEの場合はtr要素のdisplayプロパティがblockであっても問題なくスライドするので、次のような関数を作成し、エラー発生時は何もしない(catchして何も行わない)ようにしました。}}これを、slideDown()メソッドの第2引数に、コールバック関数として指定します。すると、表示時のdisplayプロパティが、(table-rowをサポートしているブラウザだけ)table-rowになります(ポイント5)。});divが消えた後で、行そのものを非表示に切り替えるだいたい以上でうまくスライドしますが、実際に消えているのはセル内部のdiv要素なので、table要素でborderに幅がある場合は、行が残っているのが視覚的にも分かります。その対策として、div要素のスライド終了と(ほぼ)同時に、行(tr要素)を非表示にします。これにはhide()メソッドを使用しますが、JavaScriptのsetTimeout()でタイミングを遅らせます。});setTimeout()関数の第2引数に指定する値はslideUp()の引数と同じ値にします。実行されるようになって、行そのもののスライド非表示がスムーズに完了したように見えます(ポイント6)。IE6で、非表示時に一旦フラッシュしたように見える場合IE6では、まれにslideUp()が完了する直前(displayプロパティがnoneになる時)に、一旦スライド前の状態に一瞬だけ戻る事があります。見ているとフラッシュしたような動作です。これはIEのレンダリングモードが後方互換モードになっているせいで、ボックスモデルがW3C標準に準拠していないのが原因です。HTMLの1行目をDOCTYPE宣言にすると、IEは標準準拠モードでレンダリングをするので、このフラッシュは無くなります。XML宣言などが1行目に書いてある場合は、削除してDOCTYPE宣言を1行目に持ってくる必要があります。完成したコード以上で、行の表示/非表示をスライドアニメーションさせるサンプルは完成です。全コードを記載します。返信をキャンセルする。