質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • jQuery

    7996questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4985questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    1092questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

jQueryでtable内に文字を出力

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 108

rinneP2525

score 6

前提・実現したいこと

monacaで1か月に課金できる内容を設定し、課金額を入力したら「のこり○○円」と出るようなアプリを作っています。
課金内容を入力した際に履歴に表示するようにしたいのですが、submitボタンを押すとtextaleaに「"day"に"money"円課金」というのを表示するようにしたいです。
今のコードでどこが間違っているか教えていただきたいです。

該当のソースコード

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <title>メイン</title>

  </head>
  <body>
    <header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span>menu</span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <form id="settei" oninput="rslt.value = Number(settei.value);">
        <p>上限設定</p>
        <p><input type="number" name="settei"></p>
        </form>
        <input type="button" value="決定" class="kettei" onclick="nav-close">
      </div>
  </div>
</header>
  <div class="main"> 
    <div class="jougen">
      <p>課金上限</p>
      <p><output name="rslt" form="settei">0</output></p>
    </div>
      <div class="honbun1">
       <p>入力</p>
      <div style="display:inline-flex">
         <form id="f1">
         <div class="moji">
         <input type="date" name="day" id="day" class="day">
           <input type="number" class="money" name="money" id="money"><input type="submit" value="入力" class="kettei1"></div>
        </form>
        </div>
    </div>
    <div class="nokori">
      <p>今月の残り課金額</p>
      <p><output name="result" >0</output></p>
    </div>
    <br>
    <p>履歴</p>
    <textarea id="rireki">
    </textarea>
    </div>
    <input type="reset" value="クリア" class="reset">
  </body>
</html>
// This is a JavaScript file
 $(function(){

/* ここにjQueryのコードを記述 */



/* 履歴表示 */
  $('#f1').on('submit',function(e){
    e.preventDefault();
    var v_day=$("#day").val();
    var v_money=$("#money").val();
    if(v_day!=="" && v_money!==""){
     $('#rireki').append(.text(v_day).append(.text(v_money)));
    }
  });



});

追記:
すみませんvalでは上書きされるのでappendにしてしまっていました…

/* 履歴表示 */
  $('#f1').on('submit',function(e){
    e.preventDefault();
    var v_day=$("#day").val();
    var v_money=$("#money").val();
    if(v_day!=="" && v_money!==""){
    $('#rireki').append( v_day + "に" + v_money + "円課金" );
    }
  });

追記:もともとやりたかったtableのコードも書いておきます

<table id="t1" border="1">
<thead>
<tr>
<th>日付</th>
<th>金額</th>
<th>削除</th>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
    <input type="reset" value="クリア">
    </div>
  $('#f1').on('submit',function(e){
    e.preventDefault();
    var v_day=$("#day").val();
    var v_money=$("#money").val();
    if(v_day!=="" && v_money!==""){
      $('#t1 tbody').append($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<input type="button" vallue="-">')));
      $("#day,#money").val("");
    }
  });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こういうことでしょうか。

// $('#rireki').append(.text(v_day).append(.text(v_money)));
// ↓
// $('#rireki').val( v_day + "に" + v_money + "円課金" );
// ↓ (追記)
   $('#rireki').val( $('#rireki').val() + v_day + "に" + v_money + "円課金\n" );

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/29 23:49 編集

    ありがとうございます!
    ただこれをリストとして出したいので少し違うかもしれません…

    キャンセル

  • 2019/03/29 23:59

    リストとは。具体的に提示してください。

    キャンセル

  • 2019/03/30 00:02

    "day"に"money"円課金
    "day"に"money"円課金
    "day"に"money"円課金
    "day"に"money"円課金
    と追加していくにしたいのです…

    今現状だと"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金となってしまうので…

    キャンセル

  • 2019/03/30 00:08

    > 今現状だと"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金となってしまうので…

    提示したコードではなるはず無いのですが、修正したコードを質問文に「追記」してください。(決して元のコードを消さないでください)

    キャンセル

  • 2019/03/30 00:17

    textareaを使うこと自体が間違っているような気もしますが、複数行に分かれて表示されるように修正しました。

    キャンセル

  • 2019/03/30 00:20 編集

    やっぱりそうですか…
    ほんとうはtableに出力したいなと思ったのですが、tr自体が増えることになってしまったのでtextaleaにしたんでした…
    テーブル内に日付、金額を追記していく方法があればそちらの方がうれしいのですが…

    キャンセル

  • 2019/03/30 00:21

    > テーブル内に日付、金額を追記していく方法があればそちらの方がうれしいのですが…
    テーブルに行を追加するだけですよ。

    キャンセル

  • 2019/03/30 00:34

    行を追加するコードをお昼に教えていただいたのでそちらを修正したものを載せてみました。
    ただこれだと既存の行に文字が入らなくて行だけ増えていくので解決策がなくtxtaleaという方式を取っていました…

    キャンセル

  • 2019/03/30 00:36

    既存の行に入れる必要があるのでしょうか。最初から「既存の行」がない状態で追加していけばよいだけでは?

    キャンセル

  • 2019/03/30 00:41

    やっぱりそうですか…
    少し見栄えが悪いかなと思っただけなんです…ありがとうございます

    キャンセル

  • 2019/03/30 01:05

    2番目の行に追加(.afterとかで)し、最後の行を消すとかすればできますよ。(行を1行ずつ確認し、中身が入っていない場合挿入、とかも出来ますが)

    キャンセル

  • 2019/03/30 01:15

    なるほど!その手もあるのですね!
    何度もありがとうございます…!

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7996questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4985questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    1092questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。