【Bootstrap】表の行をクリックしたときに色を変える方法

今回は、Vue.jsで表の行をクリックしたときに色を変える方法をご紹介します。

ここではJavaScriptフレームワークVue.jsとBootstrapのバージョン5.0.2を使用しています。

表の行をクリックしたときに色を変える方法
v-forを使って表の行をクリックしたときに色を変える方法
まとめ

表の行をクリックしたときに色を変える方法

実際に作成した、行をクリックしたときに色が変わる表のサンプルは次のようになります。

サンプルの表の
列項目は「名前」,「年齢」,「出身地」、
行項目は「1」,「2」,「3」としています。

Hello, world!

	名前	年齢	出身地
1	田中	20	東京
2	鈴木	25	大阪
3	佐藤	30	北海道

行をクリックしたときに色が変わる表のサンプルコードは次のようになります。

<script lang="ts">
export default {
  data() {
    return {
      activeNumber: null,
    };
  },
  methods: {
    isActive(number) {
      if (number == this.activeNumber) return true;
    },
  },
};
</script>

<template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col" />
        <th scope="col">名前</th>
        <th scope="col">年齢</th>
        <th scope="col">出身地</th>
      </tr>
    </thead>
    <tbody>
      <tr :class="{ active: isActive(1) }" @click="activeNumber = 1">
        <th scope="row">1</th>
        <td>田中</td>
        <td>20</td>
        <td>東京</td>
      </tr>
      <tr :class="{ active: isActive(2) }" @click="activeNumber = 2">
        <th scope="row">2</th>
        <td>鈴木</td>
        <td>25</td>
        <td>大阪</td>
      </tr>
      <tr :class="{ active: isActive(3) }" @click="activeNumber = 3">
        <th scope="row">3</th>
        <td>佐藤</td>
        <td>30</td>
        <td>北海道</td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.active {
  background-color: #2b96ee;
}
tbody tr:hover {
  background-color: #a9ceec;
}
</style>

表の行をクリックしたときに色を変えるために、<tr></tr>に処理を追加していきます。

<tr :class="{ active: isActive(1) }" @click="activeNumber = 1">

表の一行(row)を指定する<tr>タグにv-bind:class を追加して、<tr></tr>内のクラスを動的に切り替えます。

v-bind:classは省略して:classと書くことができるので、今回は:classと書いています。

サンプルコードでは、isActiveメソッドの戻り値がtrueの場合、activeというCSS クラスをclassに含めることを決定しています。

そして、isActiveメソッドでは、クリックした行とisActiveメソッドの引数の値が等しい場合にtrueを返すようにしています。

また、<tr>タグ内にはクリックイベント発火時に実行されるJavaScriptをv-on:clickで指定しています。

サンプルコードでは行をクリックしたら、activeNumber = 1のようにactiveNumberに行番号が代入されます。

<style></style>内では、activeクラスでクリックしたときの行の背景色をカラーコードの#2b96ee（青色）に、tbody tr:hoverで行にカーソルを合わせたときの背景色を#a9ceec（水色）に指定しています。

・基本的な表の作成方法
・表作成で使用するHTMLタグの意味
を知りたい方はこちらの記事をご覧ください。

【Vue.js】Bootstrapで表（table）を作成する方法

Bootstrapを使用したシンプルな表(table)の作成方法を初心者向けに解説！HTMLタグや属性の説明も含め、具体的なコード例を紹介します。名前、年齢、出身地を表示する実用的なサンプルを見ながら、表の基本スタイルを簡単に適用する方法が学べます。

・表の行にマウスのカーソルを合わせたときに行の色を変えるホバーの方法
を知りたい方はこちらの記事をご覧ください。

【Vue.js／Bootstrap】表の行にマウスを合わせたときに色を変える方法

Bootstrapで表の行にマウスを合わせたときに色を変える方法を紹介します。今回はBootstrapのバージョン5.0.2を使用しています。マウスを合わせたときに表の行の色が変わるホバー状態にするには<table>タグ内のclassに.table-hoverクラスを追加します。

これで行をクリックしたときに色が変わる表を作成することができました。

続いて、配列からv-forで作成した表をクリックした場合の色の変え方をご紹介します。

v-forを使って表の行をクリックしたときに色を変える方法

次のように、v-forを使った表の場合でも、行をクリックしたときに色が変わるようにすることができます。

<script lang="ts">
export default {
  data() {
    return {
      items: [
        { name: "田中", age: 20, hometown: "東京" },
        { name: "鈴木", age: 25, hometown: "大阪" },
        { name: "佐藤", age: 30, hometown: "神奈川" },
      ],
      activeNumber: null,
    };
  },
  methods: {
    isActive(number: null) {
      if (number == this.activeNumber) return true;
    },
  },
};
</script>

<template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col" />
        <th scope="col">名前</th>
        <th scope="col">年齢</th>
        <th scope="col">出身地</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item, index) in items"
        :key="index"
        :class="{ active: isActive(index) }"
        @click="activeNumber = index"
      >
        <th scope="row">{{ index + 1 }}</th>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.hometown }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.active {
  background: #2b96ee;
}
tbody tr:hover {
  background-color: #a9ceec;
}
</style>

Hello, world!

	名前	年齢	出身地
{{ index+1 }}	{{ item.name }}	{{ item.age }}	{{item.hometown}}

ここでも先ほどと同様に、表の行をクリックしたときに色を変えるために、<tr></tr>に処理を追加していきます。

<tr :class="{ active: isActive(1) }" @click="activeNumber = 1">

v-forディレクティブを使用して表を作成した場合は、

<tr>タグ内では:class="{ active: isActive(index) }"のようにisActiveメソッドの引数をindexに、

@click=”activeNumber = index”のようにクリックした行番号にindexを代入します。

このように、v-forで取得したindexを利用することで、v-forで作成した表の行をクリックした場合でも色が変わるようにすることができます。

「v-forで配列から表（table）を作成する方法」を知りたい方はこちらの記事をご覧ください。

【Vue.js / Bootstrap】v-forで配列から表（table）を作成する方法

Vue.jsのv-forディレクティブを使用して、配列から表(table)を作成する方法を紹介します。CSSフレームワークにはBootstrapのバージョン5.0.2を使用しています。

まとめ

今回は、Vue.jsとBootstrapを使って表の行をクリックしたときに色を変える方法を紹介しました。

v-bind:classや@clickを使うことで、クリックされた行のスタイルを簡単に変更することができます。

また、v-forディレクティブを使った場合も、インデックスを活用して同様の動作を実現できるため、複数のデータを扱う際にも便利です。

ぜひ、ご自身の環境でも試してみてください！