• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:jqueryでtable内容の置き換え)

jqueryでtable内容の置き換え

このQ&Aのポイント
  • Jqueryを利用してAJAXでPOSTして計算結果をTableに埋め込みたいです。
  • 入力フォームに入力された内容をPHPで計算し、同一行のテキストボックスに結果を表示したいです。
  • 50行の処理を効率的に実装する方法を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 in1,out1,result1~in50,out50,result50があるということでしょうか。 以下のようにすれば良いと思います。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q8048008/ idは一応付けていますが利用していません。またHTMLの構成で変わってきます。 フォーカスが外れた対象のidを取得して数字だけ引き抜いてその数字XをresultXにしても取得出来ると思います。 var index = $('input.out').index(this); としてinputのclass="out"が付いている要素のindex値を取得して$('#result'+index).text ( json.data ); にするとか。 いろいろな要素の取得方法がありますのでいろいろ試してみてください。

eccschool
質問者

お礼

御礼が遅くなり申し訳ございません。 ご回答いただきありがとうございました。 サンプルまでご提示いただき感動しました。 今回はindexを取得して対応しました。 このような方法があるとは全く知らず、リファレンスでも気づきませんでした。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jQueryでテキストファイルを読むには?

    jQueryでテキストファイルを読みたいです。 こちら(https://ghweb.info/post-2976.html)などを参考に色々試しましたが読めませんでした。 エラーは出ていません。 試したのは$.getと$.ajaxです。 テキストファイルは文字コードutf-8、bom無しです。 そもそもjQueryでテキストファイルは読めるのでしょうか?

  • jQueryでajax

    ajax(jQuery使用)を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート(This is success!)が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目1</option> <option value="2">項目2</option> </select> <p>結果:</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX
  • jQueryの$.postの戻り値による条件分岐

    jQueryの$.postにてPHPファイルをリクエストしています。 Ajax→PHPの処理後、Ajaxに処理が戻る際にPHPからAjaxに 値を受け渡し、さらにその値によってAjaxの処理を条件分岐させたい場合 どのような記述になるのでしょうか。 PHPからの戻り値は単なるテキストかtrue/falseで考えています。 それとも、そもそも$.postでは戻り値を処理する、 といった事はできないのでしょうか。

    • ベストアンサー
    • AJAX
  • jqueryで小計値の合算が出来ません・・・

    jqueryで計算した小計の値を合算したいのですが・・・ <div id="oa"> <select name="pa" id="value_pa"> <option value="0">選択して下さい</option> <option value="100">梅</option> <option value="200">竹</option> <option value="300">松</option> </select>× <select name="n" id="value_n"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>個=<span id="result_a"></span>円 </div> のように5種類の計算をして<span id="result_x"></span>の間に結果を埋め込んでいます。 この<span id="result_a"></span>から<span id="result_e"></span>の小計値をボタンを押すことにより合算して合計値を出したいのですが、うまくいきません。 jqueryでどのようにしたらいいのでしょうか? 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • jqueryの$.ajaxで送信できない

    はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか? 【やりたいこと】 formにデータを入力(html)し → jqueryを使ってpost送信(js) → 認証(php) → 結果をhtmlに表示させたい。 【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。m_m

  • jQuery テキストボックス読み取り解除

    標題について、うまく動作しません。 お手数ですが、ご教授願えたらと思っています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> 仕様:テキストボックスをクリックしたら、読み取り専用が解除される。 ※Ajaxの初期ロード時に各々の項目はreadOnly=true設定 上記が可能なら、その後拡張仕様として、フォーカスアウトした時に 再度 readOnly=trueに設定 html <table> <tr> <td><input type="text" id="code[1]" value="00001"></td> </tr> <tr> <td><input type="text" id="code[2]" value="00002"></td> </tr> <tr> <td><input type="text" id="code[3]" value="00003"></td> </tr> jQuery (function($){ $('input[type="text"]').click(function(){ $(this).attr('readonly','readonly'); }); }); Ajaxの設定は何とかできなのですが、 jQueryの設定がうまくいきません。 どうか宜しくお願い致します。

  • jqueryでtoggleを無制限に繰り返したい

    下記のhtmlテキストのjquery記載部分について質問させていただきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>toggle繰り返し</title> </head> <body> <p>toggle繰り返し</p> <div id="box" style="width:150px;height:150px;background:blue;"> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script> $(function() { $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').fadeOut(1000, function() { }); }); </script> </body> </html> 上記のhtmlの上から14行目~17行目に記載してあるにあるscript部分に、 $('#box').toggle(1000); を4回記載しているため、 4回、繰り返しフェードアウトが実行されています。 DreamWeaverCS6で作成し、ブラウザIE10、firefox24.0で動作確認しています。 ここで質問ですが、この回数を無制限に、つまり永久に繰り返すようにするには、どのようにすればよいのでしょうか?具体的なコードを記載していただけると助かります。 詳しい方がいましたら、よろしくお願いします。

  • jQueryにてformの中を書き換えました。

    jQueryにてformの中を書き換えました。 具体的には、 $.ajax({ url: "add.php", type: "get", dataType: "html", timeout: 10000, cache: false, data: { "name" : "test", }, success: function(html){ $("#list").html(html); } }); を実行し、結果を #list に置き換えています。 結果は、 <input name='item_name' value='1' id='item_name_1' type='radio'> <label for='item_name_1'>ほげほげ</label> となっています。 しかし、Postをしてみると、item_name が取得することができず NULL として帰ってきます…。。 ajaxで書き換えたformから値を取得したいです。

    • ベストアンサー
    • AJAX
  • jquery,ajaxによるphp通信でnull

    初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用) [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>

  • jQuery1.7.2でのdisabledの扱い方

    jQueryで質問させてください。 自分は、チェックボックスとテキストエリアを連動させて、 チェックボックスがチェックされると、disabledが設定されていたテキストエリアが入力可能になり、 チェックボックスのチェックが外されるとテキストエリアに入力不可になるようなものを作っていました。 jQuery1.4.4では以下のように書いて動いていました。 しかし、1.7.2にするとどちらも動かなくなりました。 1.7.2の場合はどのように記述すると以下と同じような動きになるのでしょうか? 宜しくお願いします。 $(document).ready(function() { $('#hogecheck').click(function(e) { if($('#hoge').attr('disabled') == true) { $('#hoge').attr('disabled', ''); } else { $('#hoge').attr('disabled', 'disabled'); } }) });