- ベストアンサー
JavaScriptを利用せずにテーブルの数字を増やす方法
- 「好き」というテキストをクリックすると数字が増えるテーブルを作成する方法について質問します。
- 質問内容は、データベースの情報をPHPで表示したテーブルで、「好き」というテキストをクリックすることで数字を増やすことができる仕組みを作りたいという内容です。
- 画面の切り替えをせずにリアルタイムで数字を増やしたい場合、jQueryを利用することが一般的です。ただし、他の方法でも実現可能です。
- rabbit-kimura
- お礼率91% (102/112)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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で処理すればよいでしょう
お礼
ありがとうございます！！
関連するQ&A
- テキスト入力の数字とダイナミックテキストの数字の足し算
Flash8 で集計表を作っています。 a1(ボタン) a2(静止テキストと変数) a3(ダイナミックテキストと変数)、 b1(ボタン) b2(静止テキストと変数) b3(ダイナミックテキストと変数)、 c1(ボタン) c2(テキストと変数) c3(ダイナミックテキストと変数)、 d1(ボタン) d2 (ダイナミックテキストと変数) d3(ダイナミックテキストと変数)、 を設定後、例えば a1/b1 をクリックして、a2/b2 の数字を a3/b3 に表示、ただし c2 のみは「任意の数字を記入後」c1 をクリックして c3 に表示させています。 d2 d3 は「ans」を利用して合計を表示します。 this.c_btn1.onRelease = function () { c3 = (c2); } とスクリプトを書いて処理していますが、「c3」に代入されるデータが「数字」ではなく「文字列」になるようで、d1 をクリック後に「d3」に合計が表示されません。 「c2」「c3」の関係で、「数字」を確実に「c3」へ渡す方法を教えて下さい。
- 締切済み
- Flash
- 指定した背景画像を数秒ごとに切り替えるプラグイン
java初心者です。 というか申し訳ありませんが全くわかりません。 しかし、どうしても指定した背景画像を数秒ごとに切り替えなければならなくなり、 下記のサイトで jQueryプラグインをダウンロードしたのですが使い方が全くわかりません。 http://rewish.org/demo/jquery_bg_switcher/ ダウンロードしたファイルの中にあったexample.htmlを見たのですが どこで背景画像を変更したらいいのか分からず、 <title>jQeury.bgSwitcher.js</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> head内にあるこの文章の意味もわかりません。 下の<script src="../jquery.bgSwitcher.js"></script>はjquery.bgSwitcher.jsの場所を指定しいるということはわかるのですが、なぜ上の２行にはgoolgeがついているのか。 flashを使わず背景画像を変更したいのですが、どなたか使い方が分かる方はいらっしゃいますか。いたら教えていただけたらうれしいです。 また、start、stopなどの機能もついていたのですが、私には必要なく TOPのメイン画像を背景画像に指定し、３、４秒で順番に切り替えたいのです。 （現在未定ですが、もしかしたら5枚ほど画像を切り替えたら最後の１枚で画像をstopさせるかもしれません） ちなみに画像は imgフォルダの中に入っていて main1からmain5の5枚あり、widthが770pxにheightが279pxです。 もし他にもっと簡単なやり方などあれば教えていただけたらうれしいです。 javaのことが全然分からないため至らぬ点が多々あると思いますが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 一定の数字以上で音を鳴らしたい
Flash CS5のAction Script3.0 でボタンをクリックするとテキストフィールドに数字が加算され、とある一定の数字になると音がなるFlashを作成しようと思い、 こちらの質問http://okwave.jp/qa/q6620056.html を元にボタンをクリックするとテキストフィールドの数字が加算されるスクリプトはわかったのですが、もしもボタンを１回クリックすると数字が１００加算されるとして、数字が５００になった場合にAction Script3.0を使用しライブラリから音楽を鳴らすためにはどうしたらいいでしょうか？ また、数字が１０００、１５００・・・のように増えていった場合も音を鳴らしたいのですが、 その場合どのようにすればいいでしょうか。 下記にスクリプトを記載します。 my_txt.text = String(0) var my_num:Number = 0; my_btn.addEventListener(MouseEvent.CLICK,numUp); function numUp(e:MouseEvent):void { my_num += 100; my_txt.text = String(my_num); } if(my_num>500){ trace("ok") var sound_500 = new Music(); sound_500.play(); } -------------------- 初心者のため、スクリプトがおかしかったら申し訳ございません・・・ 詳しい方ご教授願えないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- その他(ソフトウェア)
- JavascriptとJqueryを混在し記述
JavascriptとJqueryが混在したスクリプトファイル（.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を１つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後（要素を特定できるようにするため）に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね？ つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね？ ===== script.js ====== //(1)Javaスクリプト ←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery ←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。
- ベストアンサー
- JavaScript
- ワンクリックしかできないクリックカウンター
現在、ログイン式掲示板を作成中です。 その掲示板で、投稿に対してログイン中のみ、一人一回しかクリックできない「いいねボタン」のようなものを設置したいのですが、（mixiつぶやきのようなものです）どのようにすればよいのかわからずこまっております。 ネットにのっているものを参考にさせていただいて、クリック数をカウントする機能は、jQueryとjavascriptとphpでできたのですが、一回しかクリックできないようにするにはどうすればよいかわからないので、教えていただけませんか？ どうぞよろしくお願いいたします。 javascript jQuery(document).ready(function(){ //初期時のカウンターファイル読み込み //同じファイル名だと正常に読み込めないので、ランダムな数字を生成し、パラメータとして付けることで、ユニークな状態にしている。 var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); //カウンター追加後の読み込み関数 function func01(data){ var randnum1 = Math.floor( Math.random() * 10000 ); jQuery("#btn01 span").load("./count01.txt?r=" + randnum1); } //カウンター＋1追加処理 jQuery('#btn01 p').click(function(e){ //「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行 jQuery.post("post.php" , {"param1": 'count01.txt'} , func01); jQuery("#btn01 span").load("./count01.txt"); }); }); index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>カウントサンプル</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/count.js"></script> </head> <body> <div id="btn01"><p><a href="javascript:void(0);">いいね！</a></p><span></span></div> </body> </html> post.php <?php $file = $_REQUEST['param1']; $c = file_get_contents($file); $c++; $fp = fopen($file, "r+"); @fputs($fp,$c); fclose($fp);
- ベストアンサー
- PHP
- Javascript 数か所のTextに１０キーを
ｓｃｒｉｐｔの超初心者です。以下のように記述して（サンプルを参照して）１か所の入力は可能になりましたが、同じページ上で他の部分はｓｃｒｉｐｔが聞いていないようなのですが、ＩＤなどを変えていくべきですか？つまり二か所目のIDに数字を加えて、scriptでの＃部分も数字を付け加える必要がありますか？ html <input type="text" width="4" height="3" name="sen17" value="" id="defaultKeypad"> script <script type="text/javascript"> $(function() { $('#defaultKeypad').keypad(); $('#viewKeypad').click(function() { alert('現在の入力値: ' + $('#defaultKeypad').val()); }); $('#removeKeypad').toggle(function() { $(this).text('Re-attach'); $('#defaultKeypad').keypad('destroy'); }, function() { $(this).text('Remove'); $('#defaultKeypad').keypad(); } ); }); metaには <script type="text/javascript" src="jquery.keypad.js"></script> 必要なｊｓファイルは配置してあります 超基本的な質問で済みませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- [jQuery] クリックで連番関数を順番に実行
ボタンをクリックする度に連番で作成した関数を順番に実行したいのですが、スマートな書き方がわかりません。 下記のコードで一応動くのですが、関数が100個とかに増えた場合すごくコードが長くなってしまいます。 もっとスマートに書く方法はないものでしょうか？ ▼サンプルコード <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ function s1(){alert('s1');}; function s2(){alert('s2');}; function s3(){alert('s3');}; var num = 1; $('p').click(function() { if(num == 1){s1();} else if(num == 2){s2();} else if(num == 3){s3();} num++; return false; }); }); </script> </head> <body> <p>click</p> </body> </html>
- 締切済み
- JavaScript
- GoogleMapをリアルタイムに更新
データベース(MｙSQL)に更新があった場合、GoogleMap上にリアルタイムにマーカーを表示させたいと考えています。 現在、XMLファイルの読み込みライブラリー downloadxml.js を利用し、PHPのXMLファイルを読み込んで実装しています。 調査していくと、リアルタイムに更新を行うには、ajaxを利用することがわかりました。 そのため 、jQuery のJavaScriptライブラリーを利用してPHPのXMLファイルを読み込む形になるのか、と思っているのですが、データベースに更新があった場合にリアルタイムにGoogleMapを更新させるには、どちらの読み込みで行うとよろしいのでしょうか？ またリアルタイム更新には、cometという技術を使う必要があるということを調査して分かったのですが、具体的なソースコードが出ているページなど詳しい説明が載っているページがあれば、教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- MySQL
- JQueryのclick(fnc)で指定された関数中のthis
JQueryのclick(fnc)で関数中のthisの扱いについてお尋ねします。 下記コードでは仮に2つのクラスをモデルとコントローラとして、コントローラからモデルの関数を呼び出しています。value="HTML Tag"のボタンは期待したとおりに'chicken crows.'を表示しますが、value="JQuery"のボタンはcrow()中のthis.modelがundifinedになってしまいます。後者では$.fn.controllers.chickenController.crowをinputタグにコピーしてそれを実行しているのではないかと思います。そのためかthisはHTML Inputを指します。 thisを使用する以外にモデルのcrow()を実行する方法はありませんでしょうか？条件としてはモデルとコントローラのオブジェクトのペアは複数有りうり、コンストラクタやプロトタイプ中で一意の変数を定義できない点にご注意ください。 <script tyoe="text/javascript" src="jquery-1.3.2.min.js" ></script> <script type="text/javascript"> $(function(){ //名前空間 $.fn.models = new Object(); var models = $.fn.models; // コンストラクタ models.bird = function(type){this.type = type;} // インスタンスメソッド models.bird.prototype = { crow: function(){ alert(this.type + ' crowed.');} } var chicken = new models.bird('chicken'); //名前空間 $.fn.controllers = new Object(); var controllers = $.fn.controllers; // コンストラクタ controllers.birdController = function(model){this.model = model;} // インスタンスメソッド controllers.birdController.prototype = { crow: function(){ this.model.crow(); // JQuryの場合thisはHTML Inputを指します。 } } $.fn.controllers.chickenController = new controllers.birdController(chicken); $('#b').click($.fn.controllers.chickenController.crow); }); </script> <html> <body> <input type="button" onclick="$.fn.controllers.chickenController.crow();" value="HTML Tag" /> <input type="button" id="b" value="JQuery" /> </body> </html>
- ベストアンサー
- JavaScript
- ワンクリックで当日の番組表を保存するプログラム
毎日、こちらhttp://tv.biglobe.ne.jp/20051027/P27/tv_hyou_1800.htmlのテレビ番組表を手動で保存しているのですが、これを毎日ワンクリックで保存するプログラムをVisual BasicかJava Scriptで作りたいのですが、どのようなプログラムにすれば良いでしょうか？ 番組表は１日の前半と後半に別れています。アドレスは毎日変わります。保存のファイル名にも日付を入れるようにしたいです。
- ベストアンサー
- Visual Basic
お礼
ありがとうございます！！
補足
サンプルありがとうございます！！！！！！！ ページもシンプルで、コードのキレイさに感動しました！！！ >>送信先では一致するid等でレコードをupdateすれば良いと思います。 受取った数値をカウント用のDBにupdateしてデータ化し、 再度ページを開いたらその数字が初期値となる という解釈で宜しいでしょうか。 （すみません、PHPも独学なもので変な質問で申し訳ないです）