- ベストアンサー
JavaScriptを利用せずにテーブルの数字を増やす方法
- 「好き」というテキストをクリックすると数字が増えるテーブルを作成する方法について質問します。
- 質問内容は、データベースの情報をPHPで表示したテーブルで、「好き」というテキストをクリックすることで数字を増やすことができる仕組みを作りたいという内容です。
- 画面の切り替えをせずにリアルタイムで数字を増やしたい場合、jQueryを利用することが一般的です。ただし、他の方法でも実現可能です。
- rabbit-kimura
- お礼率91% (102/112)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 JavaScriptを利用したことないとのことですのでJavaScriptの実装例を回答します。 実際の動作はこちらで確認してみてください。 サーバ側のカウントは簡易的にセッションを利用しています、 また表の表示は静的です。 実際はDBから読み出して表の作成と、送信先では一致するid等でレコードをupdateすれば良いと思います。 http://hppg.moe.hm/okwave/qa/q8128196/ php側はpostにてidを受け取って(例の場合は0～2)カウントアップしてJSON形式で返しています。 ==== index.html <?php session_start(); if ( !isset($_SESSION['likenumber']) ) { $_SESSION['likenumber'] = array(0,0,0); } $windows = $_SESSION['likenumber'][0]; $apple = $_SESSION['likenumber'][1]; $android = $_SESSION['likenumber'][2]; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { $('a.btn').click ( function() { // クリックされたアンカーの次にある要素のdata-idを取得する var id = $(this).next().attr('data-id'); // likenumber.phpに非同期でidを送信し、JSONとしてレスポンスを受け取る $.post ( 'likenumber.php', { id: id }, function ( json ) { // json.valueに指定されたidのカウントが入っているので // spanタグのdata-idが一致する要素のhtmlをカウントで書き換える $('span[data-id="' + id + '"]').html ( json.value ); } ); return false; }); $('button').click ( function() { $.post ( 'likenumber.php', { id: 'reset' }, function ( json ) { $('span[data-id]').html ( '0' ); } ); }); }); </script> <style type="text/css"> a.btn { color: #0cf; text-decoration: none; } </style> </head> <body> <div class="wrap"> <header> テスト </header> <table> <thead> <tr> <th>title</th><th>like</th> </tr> </thead> <tbody> <tr> <td>ウィンドウズ</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="0"><?php echo $windows ?></span>)</td> </tr> <tr> <td>アップル</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="1"><?php echo $apple ?></span>)</td> </tr> <tr> <td>アンドロイド</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="2"><?php echo $android ?></span>)</td> </tr> </tbody> </table> <button type="button">リセット</button> </div> </body> </html>
その他の回答 (4)
- LancerVII
- ベストアンサー率51% (1060/2054)
>ページロードと同時にupdateすれば良いのですね、 >面白いです、いろいろチャレンジしてみます！！ ページロードと同時に行うのはselectです。 selectした件数を表示し、「好き」のクリックでupdateします。 >最後に1点だけ、質問時に記載忘れがありまして、 >ご存知でしたらお教えいただきたいのですが、 >二重クリックを禁止することは不可能でしょうか?? >（何度も申し訳ございません。無視していただいても構いません。） 1人1項目に対して1クリックのみということでしょうか？ 技術的には可能ですが、ユーザ管理が出来てないとほぼ無理です。 ログイン認証等行っていれば、カウントデータテーブルのレコードにそのユーザの情報があったらカウントしない（または「好き」のリンクを外す等の)制御ができますが、ログインしていないのであれば”誰が”クリックしたかわかりません。 クッキーを利用してという方法もありますが、クッキーを削除されちゃえばまたクリックできます。 ではIPアドレスでやろうと思ってもIPアドレスは変わるものと考えますので完全な制御は無理です。
お礼
クリック時のPOSTでupdateですね、ありがとうございます！！ 二重クリックについても、大変丁寧にご回答いただきありがとうございました！！ ログイン機能なども使っておりましたが使わずにできないかと色々調べておりました。 諦めきれずに探すばかりで、自分の中で「無理」という区切りがどうももてなくて・・・ 本当に感謝しております、ありがとうございました！！
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >受取った数値をカウント用のDBにupdateしてデータ化し、 >再度ページを開いたらその数字が初期値となる >という解釈で宜しいでしょうか。 そうですね。ページを開いた時に、データを取得しておきます。 その件数を初期値として画面に表示します。 それか、初回のロードもJavaScriptを利用して取得するのも手です。 先のソースですと「好き」をクリック時にidを送信してそのidのカウントをアップして返しています。 それをページロード後に全てのIDの値を取得して動的に設定します。 方法はいろいろありますので、チャレンジしてみてください。
お礼
ありがとうございます！！
補足
お忙しい中ご回答感謝しております。 わかりました！！ ページロードと同時にupdateすれば良いのですね、 面白いです、いろいろチャレンジしてみます！！ 最後に1点だけ、質問時に記載忘れがありまして、 ご存知でしたらお教えいただきたいのですが、 二重クリックを禁止することは不可能でしょうか?? （何度も申し訳ございません。無視していただいても構いません。）
- 35fa8e3c
- ベストアンサー率39% (9/23)
見えない（スタイルシートのdisplay:none）インラインフレーム内でphpを呼び出す。 親は遷移しない。 遷移先phpのURL末尾に「?」とパラメータの組み合わせを書くことで、親から子にパラメータを渡すことができる。 http://www.aiueo/index.php?os=windows&score=1 など。 ボタンをクリックしたら (1)インラインフレームの遷移先ＵＲＬを親のJavaScriptから書き換える。 (2)遷移させる (3)親の数値もJavaScriptで更新する (4)php内でURLのパラメータを処理する。
お礼
ありがとうございます！！
- yambejp
- ベストアンサー率51% (3827/7415)
データの保持はSQLかCSVで対応してください データへのアクセスはajaxで処理すればよいでしょう
お礼
ありがとうございます！！
お礼
ありがとうございます！！
補足
サンプルありがとうございます！！！！！！！ ページもシンプルで、コードのキレイさに感動しました！！！ >>送信先では一致するid等でレコードをupdateすれば良いと思います。 受取った数値をカウント用のDBにupdateしてデータ化し、 再度ページを開いたらその数字が初期値となる という解釈で宜しいでしょうか。 （すみません、PHPも独学なもので変な質問で申し訳ないです）