勉強したことのメモ

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

  関連記事

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

PHPとSQLiteでi-mobileのデータをグラフ化する方法

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...