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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

jQuery

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

Monaca

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

Q&A

解決済

1回答

1266閲覧

jQueryでtable内に文字を出力

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

jQuery

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

Monaca

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

0グッド

0クリップ

投稿2019/03/29 14:39

編集2019/03/29 15:32

前提・実現したいこと

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

該当のソースコード

html

1<!DOCTYPE HTML> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <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'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="css/main.css"> 9 <script src="js/jquery-3.3.1.min.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 <script type="text/javascript" src="js/main.js"></script> 12 13 <title>メイン</title> 14 15 </head> 16 <body> 17 <header> 18 <div id="nav-drawer"> 19 <input id="nav-input" type="checkbox" class="nav-unshown"> 20 <label id="nav-open" for="nav-input"><span>menu</span></label> 21 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 22 <div id="nav-content"> 23 <form id="settei" oninput="rslt.value = Number(settei.value);"> 24 <p>上限設定</p> 25 <p><input type="number" name="settei"></p> 26 </form> 27 <input type="button" value="決定" class="kettei" onclick="nav-close"> 28 </div> 29 </div> 30</header> 31 <div class="main"> 32 <div class="jougen"> 33 <p>課金上限</p> 34 <p><output name="rslt" form="settei">0</output></p> 35 </div> 36 <div class="honbun1"> 37 <p>入力</p> 38 <div style="display:inline-flex"> 39 <form id="f1"> 40 <div class="moji"> 41 <input type="date" name="day" id="day" class="day"> 42 <input type="number" class="money" name="money" id="money">43 <input type="submit" value="入力" class="kettei1"></div> 44 </form> 45 </div> 46 </div> 47 <div class="nokori"> 48 <p>今月の残り課金額</p> 49 <p><output name="result" >0</output></p> 50 </div> 51 <br> 52 <p>履歴</p> 53 <textarea id="rireki"> 54 </textarea> 55 </div> 56 <input type="reset" value="クリア" class="reset"> 57 </body> 58</html>

jQuery

1// This is a JavaScript file 2 $(function(){ 3 4/* ここにjQueryのコードを記述 */ 5 6 7 8/* 履歴表示 */ 9 $('#f1').on('submit',function(e){ 10 e.preventDefault(); 11 var v_day=$("#day").val(); 12 var v_money=$("#money").val(); 13 if(v_day!=="" && v_money!==""){ 14 $('#rireki').append(.text(v_day).append(.text(v_money))); 15 } 16 }); 17 18 19 20});

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

jQuery

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

追記:もともとやりたかった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(""); } }); });

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

js

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

投稿2019/03/29 14:46

編集2019/03/29 15:16
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/29 14:54 編集

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

2019/03/29 14:59

リストとは。具体的に提示してください。
退会済みユーザー

退会済みユーザー

2019/03/29 15:02

"day"に"money"円課金 "day"に"money"円課金 "day"に"money"円課金 "day"に"money"円課金 と追加していくにしたいのです… 今現状だと"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金となってしまうので…
kei344

2019/03/29 15:08

> 今現状だと"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金"day"に"money"円課金となってしまうので… 提示したコードではなるはず無いのですが、修正したコードを質問文に「追記」してください。(決して元のコードを消さないでください)
kei344

2019/03/29 15:17

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

退会済みユーザー

2019/03/29 15:21 編集

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

2019/03/29 15:21

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

退会済みユーザー

2019/03/29 15:34

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

2019/03/29 15:36

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

退会済みユーザー

2019/03/29 15:41

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

2019/03/29 16:05

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

退会済みユーザー

2019/03/29 16:15

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問