不規則にrowspanを含むtableを1行ごとに色を変える

2018年4月4日2019年12月8日

tableタグで、1行ごとに色を変えたいケースがあります。
単調なものであれば、ＣＳＳだけで実装できますが、rowspanが不規則に入ると表示がおかしな感じになります。

いろいろ試行錯誤して、Jqueryを使用して何とか出来たので忘備録として残します。

ＣＳＳのみで実行するとこのような感じになります。

規則正しいテーブルの場合は、1行ごとに色が変わりますが、rowspanが混ざると均一性がなくなります。

ＣＳＳだけでなんとかならないかと思いましたが、規則性がない場合はむつかしいことがわかりました。

そこで、動的にＪｑｕｅｒｙで何とかしてみることにしました。

ネットで対応しているものを見つけたものの・・

Googleで検索してみると、Jqueryでrowspan対応のものがありました。
実行してみると、やりたいことができていてこれでＯＫと思ったのですが・・
Tableが2つ以上あると誤動作し、Table1個の場合のみしか動作しませんでした。

TABLE 1個の場合はうまくいったのですが、2個あると、うまく動作しませんでした。

なぜか、全行色が塗りつぶされてしまいました。

解決方法を探したけど見つからなかったので、考えてみました。

力技で何とかする方法はありますが、汎用性を高めるために、Jqueryで何とかならないものかとGoogleを探しましたが、不規則rowspan　tableが複数ある場合の処理については見つけられませんでした。

そこで、原因を考えてみました。

このスクリプトは、先頭行のＴＨタグが何個あるかを数え、同じ個数であれば行が変わり、違う個数であれば、前行のつづきと判断しています。

複数テーブルある場合は、どうやらこの初回処理が失敗しているようでした。
テーブルごとに毎回初回処理を実行できれば何とかなりそうです。

そこでひらめきました。
そもそもtableタグ自体を拾いながら処理すればよいのではないか?

やってみたらビンゴでした。

複数テーブルが混在していても、rowspanが混ざっていてもそれなりにうまく表示されるようになりました。