6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【Vue.js】動的に行が増減する<table>でもゼブラ柄を効かせたい!

<table>を使ってデータを見せる際に可視性を上げるために使いがちなゼブラ柄(ストライプ?)。見やすくて使いやすいですよね!

↓こういうやつ
image.png
みんな大好きBootstrapでも「.table-striped」というclassがこんな風になってるわけですが、とにかく使い勝手が良いものです。

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}

やってみる

では作ってみましょう。<tr>を何行も書きたくないのでVue.jsで書きます。
世界最大級の動物を重さで順位付けした10位までを<table>表示できました。見事なゼブラ柄です!気分が良い!

See the Pen ZYVwag by ryo_hisano (@ryo_hisano) on CodePen.

表示・非表示したい

TODOアプリのように、チェック入れた行を消したい気分になったので、適当なclassを作り、選択されたものを非表示にしようと考えました。

.hidden {
    display: none;
}
<tr v-for="data in datas" :key="data.id" v-bind:class='{hidden:data.hide}'>

See the Pen qzKRbg by ryo_hisano (@ryo_hisano) on CodePen.

出来た!と思ってチェック入れていくと…ぎゃーす!全然美しくなくなった!なんでや・・・
↓複数チェック入れたとき↓
image.png

一旦落ちついて考えましょう。MDNによると下記のようにあります。

CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN

CSSで見栄え上非表示にした所で、HTML構造に変わりは無いため、このようになります。当たり前っちゃ当たり前です。先程のキャプチャで行くと、こう。

1.グレー
2.白(非表示)
3.グレー
4.白(非表示)
5.グレー
6.白

どうするか?(悪手)

<tr>タグを別のタグで囲ってしまえばどうでしょう。囲われた<tr>タグは兄弟要素では無くなるはずなので、スキップした状態でゼブラ柄が適用されるのでは?

<tr>...</tr>
<hidden class="hidden">
    <tr>...</tr>
</hidden>
<tr>...</tr>

適当に<tr>にidを振り、それを基に<hidden class="hidden">で囲ったり解除したりするような関数を作ってやります(jQueryで言う所のwrap / unwrap的な)。

どうやらうまく行ったようです。

See the Pen xozgVQ by ryo_hisano (@ryo_hisano) on CodePen.

とは言うものの…

独自タグで囲むなどと、すこぶる気持ち悪いです!
そういえばVue.jsを使っていたのでした!奇遇ですね!

<tr v-for="data in visibleData" :key="data.id">
computed: {
    visibleData() {
        return this.datas.filter(function(data) {
            return !data.hide;
        });
    }
}

Vue.jsなら行の削除も復元もお手軽です。

See the Pen JQZEKw by ryo_hisano (@ryo_hisano) on CodePen.

まとめ

Vue.js以外のケースでも、行の削除と行の復活が出来るように作れれば、動的に行が増減する<table>でも問題なくゼブラ柄を使うことが可能ですね!

参考

スタイルガイド — Vue.js

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?