Top > Blog > CrossBrowser > Programming

テーブルの行（TR要素）をスライドで表示切替させる方法(1)

jQuery等のライブラリを使うと、様々な視覚効果やアニメーションを簡単に行う事が出来ます。
例えば、

←押してみてください。
サンプル画像

これを実現するのに、たった１行で出来るのです。 

$("#sample_img01").slideToggle();

ところが、テーブルの行(TR要素)を同じようにスライドさせようとすると、うまくいきません。

スライドアニメーションを使って、行の表示/非表示を切り替えようとした例↓
2行目の表示非表示を切り替え 表示 非表示
この行が対象 sample
この行はダミー 
$("#sample02_radio01").click(function() {
    $("#sample02_row").slideDown();
});
$("#sample02_radio02").click(function() {
    $("#sample02_row").slideUp();
});

Firefoxでは、「非表示」を選択すると、一旦全てのセルが左端のセルに収まってからスライドアップします。「表示」にするとアニメーションしながらスライドダウンしますが、左端のセルに行の全てが収まってしまって、表自体が崩れます。

IEでは表の構造は崩れませんが、そもそもアニメーションしてくれません。単に表示/非表示が切り替わるだけで、非表示になる時は微妙に上下に振動したりします。消えるまでのタイムラグもあります。

スライドアニメーションを使わず、単純に表示/非表示を切り替えるだけなら、テーブルの行であっても問題なく動作します。

スライドアニメーションを使わないで、行の表示/非表示だけを切り替える例↓
2行目の表示非表示を切り替え 表示 非表示
この行が対象 sample
この行はダミー 
$("#sample03_radio01").click(function() {
    $("#sample03_row").show();
});
$("#sample03_radio02").click(function() {
    $("#sample03_row").hide();
});

しかし、どうしてもスライドアニメーションを実現したい場合もあります。そういう時は、CSSとHTMLの組み方、そしてjQuery関数を呼び出すタイミングを調整すると、きれいにアニメーションを行う事が出来ます。

行の表示/非表示をスライドアニメーションで切り替える例↓
2行目の表示非表示を切り替え 表示 非表示
この行が対象
sample
この行はダミー 
function _cb() {
    try {
        $("#row").css("display", "table-row");
    }
    catch(e) {}
}
$(document).ready(function() {
    var speed = 300;
    $("#radio01").click(function() {
        $("#cell01").slideDown(speed);
        $("#cell02").slideDown(speed);
        $("#row").slideDown(speed, _cb());
    });
    $("#radio02").click(function() {
        $("#cell01").slideUp(speed);
        $("#cell02").slideUp(speed);
        setTimeout(function() {
            $("#row").hide();
        }, speed);
    });
});

<table border="2">
  <tr>
    <td>2行目の表示非表示を切り替え</td>
    <td>
      <input type="radio" id="radio01" name="rds" />表示
      <input type="radio" id="radio02" name="rds" />非表示
    </td>
  </tr>
  
  <tr style="background-color: #FFCCCC;" id="row">
    <td style="padding: 0px;">
      <div id="cell01" style="height: 22px; padding: 1px;">
      この行が対象
      </div>
    </td>
    <td style="padding: 0px;">
      <div id="cell02" style="height: 22px; padding: 1px;">
        sample
      </div>
    </td>
  </tr>

  <tr>
    <td colspan="2">この行はダミー</td>
  </tr>
</table>

出来ました。解説は次回に詳しく。

[2009/03/27]

Posted in CrossBrowser, Programming | No Comments »

コメントの投稿