2011年12月21日

【jQuery】テーブルのチェックした行のみを抽出(抜き出し)して比較【チェックボックス】

楽天とかのネットショッピングサイトで、

たくさんある商品の中から、チェックをつけたものだけを取り出して比較できる

っていう機能、よくありますよね?


あれをどうしても自分のサイトでやりたかったので、
半年前にHTMLを覚え始めたばかりの初心者ながら(笑)、
jQueryで実装してみました!!

やり方を載せているサイトがほかに見つからなかったので晒してみます。

素人なので完成度は低いかもしれませんが、
よろしければコピペしてお使いくださいるんるん


◆動作サンプル→可愛いUSBカイロ徹底比較!

(実際にわたしのサイトで使っている様子です)


【jQuery】

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){

     $(".checkbuttom").click(function(){  //比較ボタンがクリックされたら
          var checked = $("input:checked").length;  //チェックされている数を数え、変数checkedにしまう
          if (checked >= 1) {     //checkedが1以上なら
               $("input.hikakubox:not(:checked)").parent().parent().hide();  //チェックがついていないチェックボックスの親要素の親要素を隠す
          }
     });

     $(".allshow").click(function(){  //元に戻すがクリックされたら
          $(".hikaku tr").show();  //すべての行を表示
     });

     $(".nocheck").click(function(){  //全て解除がクリックされたら
          $("input.hikakubox").attr('checked', false);  //すべてのチェックボックスのチェックをはずす
          return false;
     });

});
</script>

【HTML】

<div id="tabletop">

<input type="button" class="checkbuttom" value="比較" />
<input type="button" class="allshow" value="元に戻す" />
<input type="button" class="nocheck" value="全て解除" />

<table class="hikaku">
<tr>
<th>比較</th>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</table>

</div>

【使い方】

  1. jQuery本家からjquery.jsをダウンロードし、お使いのサーバーにアップロードします。
    (FC2ブログの場合は、画像をアップロードするのと同じ手順でアップロードできます。)
  2. 上に書いたjQueryのコードを<head>〜</head>内に貼りつけます。
    1行目のjquery.jsの部分には、(必要に応じて)jQueryファイルへのパスを入れてください。
    (FC2ブログの場合は、http://blog-imgs-43-origin.fc2.com/あなたのブログURLの一部/jquery.jsみたいな感じになると思います。)
  3. テーブルを表示したい箇所に、上のHTMLを書きます。
    (項目数や行数は適宜増やしてくださいね。)

【動作サンプル】

実際にわたしのサイトで使っている様子です。

可愛いUSBカイロ徹底比較!


【簡単な説明】

やっていることは非常にシンプルで、基本は
チェックがついていないチェックボックスの親要素の親要素(=チェックボックスが含まれるtr)を消す

$("input.hikakubox:not(:checked)").parent().parent().hide();

という部分だけです。


ただ、これだと1つもチェックをせずに[比較]ボタンを押した際に、
すべての行が消えてしまうという不格好なことが起こります(笑)

そこで、ボタンが押された時点でチェックの入っているボックスの数を数え、
ひとつ以上にチェックが入っていれば消す、というように条件分岐させてみました。


[元に戻す]は、すべての行を表示させるだけなので簡単です。


[全て解除]のスクリプトについては、jQuery 開発者向けメモ - チェックボックス操作サンプルさまより
そのままコピペさせていただきました(笑)


【参考サイト】

本当に勉強になりました。ありがとうございます!!



補足になりますが、サンプルページのように縦に長いテーブルの場合、
不要な行を消した後に、手動でスクロールして上に戻らないといけなくなってしまいますあせあせ(飛び散る汗)

ということなので、わたしのサイトではScrollToというプラグインを使い、

$("input.hikakubox:not(:checked)").parent().parent().hide();

の後に

$.scrollTo("#tabletop", 0);

という一行を追加しています。

本当はもっとスマートなやり方があると思うのですが、調べてもわからなかったのであきらめました(笑)


使い道としては、疑似ショッピングモール系のアフィリサイトなどで使えるかな?と思いますカバン

もちろんアフィリエイトでなくても、比較したいものがあったら使ってみてくださいかわいい

「ここ間違ってるよ」とか「もっとこうしたら良いよ」とかがありましたら、
初心者なのでやさしく教えていただけると嬉しいです(汗)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 16:50 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。