• HOME > 
  • JavaScript > 
  • JavaScriptで偶数と奇数を判定する方法【テーブルの行...

JavaScriptで偶数と奇数を判定する方法【テーブルの行などを交互に処理する】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2024年05月16日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

JSで数値の偶数と奇数を判別するには?

JSで「偶数と奇数の判別」を行う機会がありましたので、その際覚えた内容を備忘録として残しておきます。

結論から言うと、ある数値に対して「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。

偶数奇数の判別式

これを条件分岐に落とし込むと次のようになります。

JavaScrit

/*偶数の場合*/
if(number % 2 == 0){
    //処理をここに記述   
}
/*奇数の場合*/
if(number % 2 !== 0){
    //処理をここに記述   
}

JSで偶数奇数を判別してテーブルの行を色分け

ここからは、「JSでの偶数奇数を判別」を調べるきっかけとなった出来事の備忘録です。

JavaScritを使って配列のデータからテーブルを生成し、偶数番目の行に色付けしたいというという状況がありました。

目指していたのは以下のようなテーブルです。

目指すテーブルのデザイン

まずJSで配列をもとにテーブルを生成しました。

JavaScrit

var data = [
    {
        name:"東京太郎",
        phone:"03-0000-0000"
    },
    {
        name:"埼玉次郎",
        phone:"04-0000-0000"
    },
    {
        name:"千葉三郎",
        phone:"05-0000-0000"
    },
    {
        name:"神奈川四郎",
        phone:"06-0000-0000"
    },
    {
        name:"茨城五郎",
        phone:"07-0000-0000"
    },
];
var html = "";
for(var n = 0; n < data.length; n++){
    var number = Number(n) + 1;
    html += "<tr>";
    html += "<th rowspan='2'>"+ number +"</th>";
    html += "<td>"+ data[n]["name"] +"</td>";
    html += "</tr>";
    html += "<tr>";
    html += "<td>"+ data[n]["phone"] +"</td>";
    html += "</tr>";
}//end for

var testTbl = document.getElementById("testTbl");
testTbl.innerHTML = html;

あとはCSSでセルに背景色を設定するだけと思ったのですが、ここでつまづきました。

これまでテーブルの行を交互に色分けしたい時は、CSSの疑似クラスを使って「tr:nth-child(even)」や「tr:nth-child(odd)」のように指定していたのですが、この状況だと次のようになってしまいます。

CSSの疑似クラスで行を色分けする

テーブルのHTMLを見るとわかりますが、名前と電話番号を合わせて1行として扱いたくても、実際のtr要素は2行に分かれているため、電話番号のセルのみが偶数行として処理されてしまうのが原因です。

HTML

<table id="testTbl">
    <tbody>
        <tr>
            <th rowspan="2">1</th>
            <td>東京太郎</td>
        </tr>
        <tr>
            <td>03-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">2</th>
            <td>埼玉次郎</td>
        </tr>
        <tr>
            <td>04-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">3</th>
            <td>千葉三郎</td>
        </tr>
        <tr>
            <td>05-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">4</th>
            <td>神奈川四郎</td>
        </tr>
        <tr>
            <td>06-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">5</th>
            <td>茨城五郎</td>
        </tr>
        <tr>
            <td>07-0000-0000</td>
        </tr>
    </tbody>
</table>

そこでJS側で偶数行としてひとまとめに扱いたいtr要素に専用のクラスを付与して色分けするという方法にたどり着きました。

今回のテーマである「偶数と奇数の判別」を使って条件分岐を追加し、tr要素に「tr_even」というクラスを付与します。

JavaScrit

//省略
for(var n = 0; n < data.length; n++){
    var number = Number(n) + 1;
    html += "<tr ";
    if(number % 2 == 0){//偶数行の場合
        html += "class='tr_even'";//クラスを付与
    }//end if
    html += ">";
    html += "<th rowspan='2'>"+ number +"</th>";
    html += "<td>"+ data[n]["name"] +"</td>";
    html += "</tr>";
    html += "<tr ";
    if(number % 2 == 0){//偶数行の場合
        html += "class='tr_even'";//クラスを付与
    }//end if
    html += ">";
    html += "<td>"+ data[n]["phone"] +"</td>";
    html += "</tr>";
}//end for
//省略

最終的なHTMLは次のようになります。

あとはクラス「tr_even」にCSSで背景色を設定すれば完成です。

HTML

<table id="testTbl">
    <tbody>
        <tr>
            <th rowspan="2">1</th>
            <td>東京太郎</td>
        </tr>
        <tr>
            <td>03-0000-0000</td>
        </tr>
        <tr class="tr_even">
            <th rowspan="2">2</th>
            <td>埼玉次郎</td>
        </tr>
        <tr class="tr_even">
            <td>04-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">3</th>
            <td>千葉三郎</td>
        </tr>
        <tr>
            <td>05-0000-0000</td>
        </tr>
        <tr class="tr_even">
            <th rowspan="2">4</th>
            <td>神奈川四郎</td>
        </tr>
        <tr class="tr_even">
            <td>06-0000-0000</td>
        </tr>
        <tr>
            <th rowspan="2">5</th>
            <td>茨城五郎</td>
        </tr>
        <tr>
            <td>07-0000-0000</td>
        </tr>
    </tbody>
</table>

まとめ

以上がJavaScriptで偶数と奇数を判定する方法です。

メソッドがある訳でもなく、いたってシンプルな方法ですね。Webアプリなどを作っていると使いどころはたくさんありそうなので覚えておいて損はないでしょう。

広告
広告

関連する記事

サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]