ストライプテーブル導入

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

参考書を元に、ストライプテーブルを導入しました。

最初、動きがおかしかったので調べてみたら、サンプルコードでは列数を得るのにth要素の数を使っていました。 自分のテーブルでは左端の列にもth要素を指定していたので、数が合わなかったようです。 これはtd要素に変更しました。

これでOKと思いきや、今度は1行目と5行目しか列のハイライトがオンになりません。
実は例のタブページの中にあるテーブルだったので、同じページ上に複数のテーブルが存在していたのでした。
これはth要素の数をtable要素の数で割ることで解決しました。 同じ列数のテーブルだからいいけど、そうでなかったら列のハイライトは難しいですね。

と、思ったら検索条件の入力部分にテーブルを使っていました。 これはdl、dt、dd要素によるリストに置き換えました。

jQueryやJavaScriptの読み込み位置ですが、最初はbody要素を閉じる直前に置いていましたが、今はheader要素内に移動しました。 タブページなどでは、早めに読み込んだ方がいいようです。