JS テーブルのアニメーション表示

質問

JavaScript テーブルのアニメーション表示

ここに１つのテーブルがあります。
「すべて表示」にチェックを入れたら、すべての列を表示します。
「３大栄養素」にチェックを入れたら、３大栄養素の列だけ表示します。
次の仕様を満たすには、どのようなコードになりますか？

＜仕様＞
・「３大栄養素」は表の項目セルに「S３」クラスを付与
・チェックボックスで列の表示制御をする
・表示・非表示はスライド・アニメーション

［HTML］
<div class="container">
<form name="form2">
<label><input name="check2" type="checkbox">３大栄養素</label>
</form>

<table id="tbl3">
<caption>イチジクの栄養価</caption>
<thead>
<tr>
<th>状態</th>
<th>エネルギー</th>
<th>水分</th>
<th class="S3">たんぱく質</th>
<th class="S3">脂質</th>
<th class="S3">炭水化物</th>
<th>灰分</th>
<th>飽和脂肪酸</th>
<th>不飽和脂肪酸</th>
<th>コレステロール</th>
<th>食物繊維</th>
</tr>
</thead>
<tbody>
<tr>
<th>生</th><td>54 kcal</td><td>84.6g</td><td>0.6g</td>
<td>0.1g</td><td>14.3g</td><td>0.4g</td><td>0.02g</td>
<td>0.07g</td><td>0</td><td>1.9g</td>
</tr>
</tr>
<th>乾</th><td>291 kcal</td><td>18.0g</td><td>3.0g</td>
<td>1.1g</td><td>75.3g</td><td>2.5g</td><td>0.17g</td>
<td>0.60g</td><td>0</td><td>10.7g</td>
</tr>
</tbody>
</table>
</div>

回答No.4

AsarKingChang

>これは無理じゃないかと。
んま、遊びなので＾＾気が向いたらまた参加しますよ

お礼

ご回答ありがとうございます。

AsarKingChangさんでしたら
朝飯前（夕飯前）だと思いますけど・・・

回答No.3

AsarKingChang

>多分、それだと表の形が崩れます。
それを、overflow:hidden;で
吸収させようと思って、しくじりまして。

お礼

ご回答ありがとうございます。

補足

＞不要カラムをdisplay:noneに・・・
そうした場合、元に戻そうとすれば
セルの右側セルが下に落ちるという現象が
起こります。
そのため、
＞overflow:hidden;
これは無理じゃないかと。

回答No.2

AsarKingChang

やろうとしたのは、
最初nthで不要カラムをdisplay:noneにしときつつ、
:checkedでそれをアニメーションCSSでのshowを
overrideしつつ、入れたらいけるかな～って思って＾＾
やってみたんですけどね。
ちなみ、JSなしでやろうとして、コケました＾＾

ただやろうとしてること自体は、恐らく正しかったと思います。

実際の現場だと、「多いカラム」と「少ないカラム」を
PHPなどでどちらも出力しておき、
:checkedなどで、display:none切り替えするだけで、
できるよね～？ってやり方が多いので、
そこにアニメ入れてみようとは、おもったんですよね。。

お礼

ご回答ありがとうございます。

補足

＞最初nthで不要カラムをdisplay:noneにしときつつ、

多分、それだと表の形が崩れます。

（私の場合はそうなってしまい、
　それを乗り越えて Vanilla JSで作り上げました）

回答No.1

AsarKingChang

今回、回答じゃないんですが＾＾
やることはやってみたんだよね＾＾
</form>
これを、一番最後に移動する必要があったけど。
:checkedの隣接CSSが動かなくて＾＾
なのだが、途中でめんどくさくなった＾＾
んま、また次回、面白いの頼むね！

お礼

ご回答ありがとうございます。

補足

＞</form>
これを、一番最後に移動する必要があったけど。

終端タグをいじってはいけませんね。
もしやるんなら、FORMの中へTABLE要素を
移動させればよいのでは？
要素の移動方法はいくつも用意されていますよ。