勉強したことのメモ

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

  関連記事

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

JavaScriptのbeforeunloadイベントでページの離脱防止

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...