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

↓こういうやつ

みんな大好き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.

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

一旦落ちついて考えましょう。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>でも問題なくゼブラ柄を使うことが可能ですね！