Firefox(Gecko系) で table の途中に form を入れると エレメント数(length) の値が 0 になる


<table>
    <form id="hoge">
      <tr>
            <td><input type=text name="aaa" value="bbb" /></td>
      </tr>
    </form>
</table>

こんな html の場合、javascript からフォームの length を参照すると

var f = document.getElementById('hoge');
f.length ← Firefox だと 0、IEだと エレメント数 になるみたい

<form>タグを <table>の外側に出すと Firefox でも正しく取得可能

【追記】
Gecko系のブラウザでは、タグの親子関係を厳格に定義しているらしく
table の配下で認識できるのは tbody caption thead tfoot のみで、同様に tr 配下に form を置いても同じ症状になる
また、td タグの内側に form を置いた場合も、その td タグ内のみのエレメントが form 配下となり、別の td に /form を置いても無視される
※ firebugで確認しても、/form は最初の td タグで終了されている

対応としては、td 内に新たなテーブルを設けたり、全て hidden 属性のフォームを用意して td 内へ設置、submit や post タイミングでそちらへデータをコピーして、ポストを行う等の方法が考えられる

コメント