勉強したことのメモ

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

  関連記事

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

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

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...