勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで偶数or奇数行に任意のClassを付与する方法

   2024/05/20  jQuery JavaScript

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定したい。ただ、PHPは使用不可という制限があったためJavaScriptかjQueryにて対応する必要がある。以下に対応方法をメモ。

 

ソースコード

var reverse_num = $("#table_id").find("tr").size();
for (var i = 0; i < reverse_num; i++) { //偶数行にclass=reverseを付与
    if (i != 0 && (i % 2 == 0)) {
        $("#table_id").find("tr").eq(i).addClass('reverse');
    }
}

size()にて#table_id内のtrタグの数を取得し、その回数分ループを回し、0行目を除く偶数行に.reverseを付与するという内容になる。

またClassの付与時はeq()にてポジションを指定している。

 

リファレンス

size

https://api.jquery.com/size/

eq

https://api.jquery.com/eq/

 - jQuery JavaScript

  関連記事

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...