みなさんこんにちは。
インスパイアの喜多です。

今回はテーブルについてのお話です。
かなり前に対応したものなので今ならもっとスマートに解決できそうなのですが、
ちょっと向き合う時間が取れないので一旦当時の形でまとめさせていただきます。

やりたかったこと

大見出し1
小見出し1a	内容1a
小見出し1b	内容1b
大見出し2
小見出し2a	内容2a
小見出し2b	内容2b
小見出し2c	内容2c
大見出し3
小見出し3	内容3

〇上記の様な形の表があり、連結セルが登場するたびに1列目のセルの色が変わるよう設定
〇さらにこの表はユーザー側でテーブルの行数・列数をいじれるようになっている
〇大見出しの数は5つから変わらない

やったこと

とりあえずtd[colspan]に反応して片っ端からクラスを付けた後要らないものを一括で削除。

jQuery(function($){
    var $targetCell = $('tr').has('td[colspan]');
    $targetCell.addClass("title-cell");
    $targetCell.eq(0).addClass('cc1');
    $targetCell.eq(0).nextAll('tr').addClass('cc1');
    $targetCell.eq(1).addClass('cc2');
    $targetCell.eq(1).nextAll('tr').addClass('cc2');
    $targetCell.eq(2).addClass('cc3');
    $targetCell.eq(2).nextAll('tr').addClass('cc3');
    $targetCell.eq(3).addClass('cc4');
    $targetCell.eq(3).nextAll('tr').addClass('cc4');
    $targetCell.eq(4).addClass('cc5');
    $targetCell.eq(4).nextAll('tr').addClass('cc5');
    $targetCell.eq(5).addClass('cc6');
    $targetCell.eq(5).nextAll('tr').addClass('cc6');
    $('.cc2').removeClass('cc1');
    $('.cc3').removeClass('cc2');
    $('.cc4').removeClass('cc3');
    $('.cc5').removeClass('cc4');
    $('.cc6').removeClass('cc5');
});

今回は大見出しの数が不動だったのでこれだけで済みましたが、
そこも変動があるようであればlengthでtd[colspan]を数えてfor文でクラス名を付ける感じになりそうです。
背景色も直接jsで指定してしまいたいですが、乱数に頼ると10パターン全部グレー系みたいな奇跡が起きることもあるので、
ちょっと締まらない感じはありますが予め複数パターンのCSSを用意しておくのが無難そうですね。
乱数の範囲を指定して比較的綺麗な色だけをランダムで返す、とか出来たら面白そうなんですけど、
それをやるにはまずカラーコードについての理解を深めないといけないですね。
色々改善の余地はありそうなのでじっくり取り掛かってみたいのですが、今はあまり時間がないのでしばらくお預けになりそうです。

また面白そうなことがあったらまとめさせていただきます。
それでは、また。

P.S

最近お刺身を漬けるのにハマっています。
個人的に一番のお気に入りは帆立のお刺身です。
醤油・出汁醤油・みりん・料理酒・白だし等を混ぜて煮立たせたものに漬けているのですが、
帆立は身が分厚い分1.5～2日くらい漬けておくとうまうまになります。
ぜひご賞味ください。