jQuery:すべてのテーブルセルにカラム番号を自動付与する

goto_jp 754views 更新:2015年3月12日
$(function(){
    $("table tr").each(function() {
        $(this).children().each(function (i) {
            i = i+1;
            $(this).addClass("column-" + i);
        });
    });
});

すべての「table tr」を参照しループ、その直下要素(th,td)でさらにループ。
それらセルに「column-1~」と行番号クラスを付与していく。

テーブル幅を整えるためだけならば1行目のセルだけに付与すれば済むので、そうした場合は最初の参照を「table tr:first-child」とするだけ。

$(function(){
    $("table tr:first-child").each(function() {
        $(this).children().each(function (i) {
            i = i+1;
            $(this).addClass("column-" + i);
        });
    });
});

HTMLタグ直指定で全走査すると重そうにも思えるので、通常使う時は「table.class tr」と特定クラス付与のテーブルに限定したほうが良さそう。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません