js_javascript スキルを使用して表示および非表示にするときの位置ずれに対する Firefox TBODY ソリューション

次の例を見てください:

<table> <tbody id="tr1" style="display:none"> <tr> <td>第一行</td> </tr> </tbody> <tbody id="tr2"> <tr> <td>第二行</td> </tr> </tbody> <tbody id="tr3"> <tr> <td>第三行</td> </tr> </tbody> </table>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

Firefox で表示すると、「最初の行」が最後の行に表示されます。
そこで、表示する必要がある行を処理した後、最初に表示する必要がある行を記録し、次にすべての行の style.display を「none」に設定し、最後に必要な行を表示する別の関数を作成しました。順次表示されます。このようにすると、IEとFirefoxの表示結果は同じになります。
その後、この方法はまだアホだと感じたので、改めて勉強したところ、2行目と3行目にstyle="display:block"を追加すれば正常に表示されることが分かりました。以下のコードを参照してください:

<table> <tbody id="tr1" style="display:none"> <tr> <td>第一行</td> </tr> </tbody> <tbody id="tr2" style="display:block"> <tr> <td>第二行</td> </tr> </tbody> <tbody id="tr3" style="display:block"> <tr> <td>第三行</td> </tr> </tbody> </table>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

Firefox では style="display:block" が設定されているかどうかの扱いが異なり、IE では適切な互換処理が行われていることがわかります。 結論と教訓は、標準的な方法を使用するように努め、ブラウザーの互換性を期待しないことです。 IEを使いすぎるとよく忘れてしまいます。 注: tbody を使用しない場合、この問題は発生しません。ただし、 tbody は行をグループ化する役割を果たすことができ、一度に複数の行を表示または非表示にする必要がある場合に便利です。