テーブル要素の表示非表示 - littlestarlingの日記

新規登録/更新で同じフォームに遷移する時、業務の流れによっては更新時のみ

表示させたい要素とかがある。

モデル要素自体はまとめて渡してしまいたいが、表示だけ制御出来ればいいかなと

いうところか。フォームはテーブルで作られていて、その一部、つまりtr

タグで囲んだ数行分をまとめて制御したい。

controller部

def new

  @models = Model.find(:all)

  @update_flag = false

end

def edit

  @models = Model.find(:id)

  @update_flag = true

end

JavaScript部

function setDisplay(){

  if($F("update_flag") == "true"){

    $("edit_area_one").style.display = "block";

    $("edit_area_two").style.display = "block";

    $("edit_area_three").style.display = "block";

  } else {

    $("edit_area_one").style.display = "none";

    $("edit_area_two").style.display = "none";

    $("edit_area_three").style.display = "none";

  }

}

divタグでtrをまとめてくくっても解釈されない。XHTML宣言したためかもしれないが

未検証。trにidを付与してtr単位で制御している。表示簡略化のためPrototype.jsの

アクセサを使った。で、body onLoad="setDisplay();"する感じ。

追記。

blockだとIE/Firefoxで表示が変わる。具体的にはFirefoxの場合ひとつのtd

の中に組み込まれてしまうような形になってしまった。

いくつかオプションを試した結果、こんな形で対応。

上記blockをtable-rowに変更。

TRタグにstyle="display:none;"をつけていたが、これを削除。

どうせonLoadのelseに書いてあるし、そちらに任せるようにすると表示

非表示がどちらでもうまくいく。書いてある状態だとFirefoxの挙動が

うまくいってくれなかった。