勉強したことのメモ

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でユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

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

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...