表の表示／非表示の切替の方法

質問

http://shinsama1980.web.fc2.com/hyakuhoh-data4.htm

上記サイトで表の上部に表の表示切替ボタンを設けたいと思っています。

切替対象は<tbody>と<tfoot>で定義した箇所で、
この２つを交互に表示しようと思っているのですが、
この場合どうすれば良いのでしょうか？

Ｐ．Ｓ
当方はＨＴＭＬ、ＣＳＳについては初心者ですので、
回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。

何卒宜しくお願い致します。

回答No.1

retorofan · ベストアンサー

＞表の上部に表の表示切替ボタンを設けたい
といわれても、抽象的ですので、
「持ち給金：２８３．５円」の
後ろにボタンを付けるとしてお答えします。

[変更前]
　持ち給金：２８３．５円</span></font></p>
<center>
<div class="twrapper">
<table class="style40" align="center">

[変更後]
　持ち給金：２８３．５円</span></font>
<button id="btn1">表示切替</button><!-- 追加 -->
</p>
<center>

<!-- 追加 -->
<script>
$(function(){
$("tfoot").hide();

$("#btn1").on("click", function(){
$("tbody").toggle();
$("tfoot").toggle();
});
});
</script>

<div class="twrapper">
<table class="style40" align="center">

以上で、お試しになってみてください。

お礼

返信いただきありがとうございます。

おかげさまで思い描いた通りの作りのＨＰを作ることができました。
重ねて御礼申し上げます。