javascriptやjqueryを利用して、テーブルのヘッダーを固定させる時に、少し嵌ったのでシステム開発備忘録として残しておきます。
経緯はGrid_Viewのヘッダーを固定するプログラムをjqueryで書きました。
Grid_Viewのヘッダーは段組みがされて居て、その中にtableを使用している少し複雑なヘッダーでした。
丸っとコピーして使用しようとしたのですが、どうしてもズレてしまいます。
Grid_Viewのヘッダーをコピーを幾度か繰り返すプログラムを書いたところ、1回目と2回目でthのwidthに差が出ていることがわかりました。
これが何を意味するのか、良く分かりません。
一通り読込んだ後で、何らかの調整が入り差が出ているのかなぁ？程度で。。。
$(document).readyイベントでプログラムを書いていますので、DOMツリーの構築が終わった時点で実行されます。
DOMツリーの構築とは、ページ内容の解析とレンダリングが終わったと言うことらしいです。
では、レンダリングとは。。。
まずは、読み込んだHTMLを解析してDOMツリーを生成します。
構築と生成の違いも今一つわりませんが。。。要素を作ったと思って良いのかな？
次に、読み込んだCSSを解析してCSSの構造体を生成します。
更に、DOMツリーとCSSの構造体から画面表示に必要なレンダーツリー（Render Tree）を構築します。
その後、レンダーツリーが持つ各DOM要素の位置を決定します。レイアウトって言って良いのかな？
最後に、レイアウトに基づいて描画されます。
先ほど、$(document).readyイベントは「DOMツリーの構築が終わった時点で実行されます」と呪文のような言葉を知ってるだけで、DOMツリーの構築を良く知りません。
ググってみると次のようなことが書いてあるページも。。。『そこで利用するのがreadyイベントです。ポイントはページ全体（画像などを含む）の読込ではなく、ページ構成（DOM要素）を読み込んだ時点で処理するため、ページを表示する前に様々な準備ができる点です。』
と言うことは、DOMツリーの構築は『ページを表示する前に様々な準備ができる点』と有るように、レイアウトを行う前までのような。。。
だとすると、GridViewはtable-layoutをautoにしているため、読込み後に調整が入ったんだろうと思って居ましたがそれで良いのかも。
ただ実際のブラウザがどのように調整をしているかを知らないため、良く分からないのですが、、、
で、差が出るのを読込み後に調整が入ったんだろうと思いつつ、なぜズレるかわからないまま、調整をしながらデバッグしていたところ、Grid_Viewのcellpaddingが‐1に設定されているを発見しました。
実際、このGridViewのcellpaddingを0にしたところ、差がかなりなくなりました。
若干の誤差は出ているものの、妥協できる程度の差でした。
javascriptやjqueryを利用して、GridViewのヘッダーを固定させる時は、コピー先のテーブルとGridViewのcellpaddingが合致しているかをチェックしてみる価値は有るような気がします。
cellpaddingを‐1にすると、cellpaddingが追加されず、cellpaddingを0にするとcellpadding=0がテーブルタグに追加されます。
以上、javascriptやjqueryを利用して、テーブルのヘッダーを固定させる時に、少し嵌ったシステム開発備忘録でした。