inputに入力した値をtableに追加していく方法

monacaで自分用のアプリを作成しています。
inputで作成した入力欄に入力した日付、金額をそのままtabeleに追記していくjqueryのコードが知りたいです。

htmlとjqueryを使用しています。

ソースはhtmlのもので、jqueryは何も入力されていません。
（色々入力して結局分からなかったので…）

htmlも初心者で、色々修正をかけているうちに訳が分からなくなったのでだいぶん変かもしれません…

       <p>入力</p>
       <form name="day">
         <p><div style="display:inline-flex">
         <input type="date" name="day" class="day">
         <div class="moji">
           <input type="number" class="money" name="money"> 円
           <input type="submit" value="入力" class="kettei1"></input></p></div>
           <br>
        </form>
         </div>
    </div>
    <div class="nokori">
      <p>今月の残り課金額</p>
      <p><output name="result" >0</output>円</p>
    </div>
    <br>
    <p>履歴</p>
<table border width="100%" height="20px">
<tr>
<th>日付</th>
<th>金額</th>
</tr>
<tr>
<td><span id="output1"></span></td>
<td><span id="output2""></span></td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>6-1</td>
<td>6-2</td>
</tr>
<tr>
<td>7-1</td>
<td>7-2</td>
</tr>
<tr>
<td>8-1</td>
<td>8-2</td>
</tr>
<tr>
<td>9-1</td>
<td>9-2</td>
</tr>
<tr>
<td>10-1</td>
<td>10-2</td>
</tr>
</table>

追記：ありがとうございます。できました！

lang
1      <p>入力</p>
2      <div style="display:inline-flex">
3         <form id="f1">
4         <div class="moji">
5         <input type="date" name="day" id="day" class="day">
6           <input type="number" class="money" name="money" id="money"> 円
7           <input type="submit" value="入力" class="kettei1"></div>
8        </form>
9        </div>
10    </div>
11    <div class="nokori">
12      <p>今月の残り課金額</p>
13      <p><output name="result" >0</output>円</p>
14    </div>
15    <br>
16    <p>履歴</p>
17<table id="t1" border="1">
18<thead>
19<tr>
20<th>日付</th>
21<th>金額</th>
22</tr>
23</thead>
24<tbody>
25</tbody>
26</table>
27    <input type="reset" value="クリア">
28    </div>

lang
1// This is a JavaScript file
2 $(function(){
3
4/* ここにjQueryのコードを記述 */
5  $('#f1').on('submit',function(e){
6    e.preventDefault();
7    var v_day=$("#day").val();
8    var v_money=$("#money").val();
9    if(v_day!=="" && v_money!==""){
10      $('#t1 tbody').append($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)));
11      $("#day,#money").val("");
12    }
13  });
14});

m.ts10806

2019/03/29 04:03 編集

どのような内容を入力したらどのように追記されるのでしょうか。仕様を明確にしてください（あとできなくても途中まででも結構なので出来るところまでやってみてください）ヒント回答（コードなし、考え方とドキュメントのリンクだけ）でもよければしますが。

yambejp

2019/03/29 04:14 編集

金額は数値じゃないのですか？（日付の3-1とか4-1とかも3/1とか4/1という意味じゃない？）とりあえず入力データをテーブルに表示することは可能ですが保存されるわけではないので気をつけてください仮に入力日付と既存データが競合したときにどうしたいかなど仕様を詰めたほうがよいでしょう

退会済みユーザー

2019/03/29 04:14

文法を修正してみました。 jqueryは試してみたのですができると思ったもので全然反応しなかったので消してしまいました…。金額は数値です…

退会済みユーザー

2019/03/29 04:28

すみませんそこはテンプレートをそのままにしてました… 保存される訳じゃないということは、保存するところは別に作成した方がいいということですね。データが競合とはテーブルがいっぱいになったらということでしょうか。その場合は上から順番に消えるように、と思っています…難しいですね…

yambejp

2019/03/29 04:35 編集

んーちょっと理解できないです課金上限額が仮に10000円と提示されているとして最初は空の履歴テーブルに日付と金額を書き込んで入力ボタンをおすとテーブルの最終行に次々にデータが付加されるということですかね？仮に日付が同じ日を入れてもデータを合計する必要はなく順不同でソートしなくてもOK？例）3/1,/3/15,3/1,3/10,3/2,3/15 ・・・みたいな最終的に金額の合計を課金上限から差し引いて残り金額を表示する感じでしょうか？仕様をちゃんと書かないと何をやりたいのかさっぱりですね

m.ts10806

2019/03/29 04:37

「保存」はデータをどうしたいかです。画面遷移などで破棄されても良いのか、保持しておきたいのか。自分だけで良いのか他の人とも共有したいのか。

退会済みユーザー

2019/03/29 04:50

回答ありがとうございます。読みながら記述していこうと思います。やりたいことを順番に書けていませんでした。申し訳ありません。 1.日付、金額を入力する 2.「入力」ボタンを押下する 3.空のテーブルデータに日付と金額が追加される 4.テーブルがいっぱいの場合、テーブルが追加される (7行を超えるとスクロールバーでスクロールできる） 5.入力データは下にある「合計」欄に足される 6.データはサーバー上に保持 7.「課金上限」-「合計」=「今月の残り課金額」 8.クリアボタンを押すとデータ(テーブル内、今月の残り課金額)が消える 9.テーブルの日付は順不同でOK こんな感じでしょうか… ちゃんと書かなければいけないことが書けておらず、申し訳ありません

yambejp

2019/03/29 04:56

サーバーへの保存が必要であればサーバー側の処理を別途どうするか記載してください不勉強で申し訳ないですが Monacaにはサーバーに保存できる仕組みがあるのでしょうか？

退会済みユーザー

2019/03/29 05:05

サーバーじゃなくてアプリに保存…でよかったです。申し訳ないです

m.ts10806

2019/03/29 05:18

回答に関するコメントであれば回答に直接コメントつけていただければと。こちらはあくまで質問への追記修正依頼、質問者への確認事項の通信欄です。

行動規範の内容に同意します

回答2件

まず
<form>タグにtype=submitのボタンという時点で入力情報はいったんHTMLからもJavaScriptから離れます。
サーバーに情報を送信するからです。
もちろんpreventDefault()やreturn false;などでsubmitをキャンセルすることはできますが、そもそもフォームによるサーバーへの情報送信がないのでしたらformタグは利用しなくて良いと思います。

HTMLについてはなるべくきちんと構文を守られるようにしてください。
でないとJavaScriptから正しく参照できない場合があります。

できれば構文チェック機能があるエディタを利用するよう強くすすめます。

以下は私が利用しているBracketsの例

少々重いですがPHPやJavaの開発でもよく用いられるEclipseでもチェックしてくれます。

※都合によりエディタ部分だけ切り取ってます

色が変わったり波線が出たりして教えてくれますね。
特に閉じ忘れがあるとレイアウトもグチャグチャになります。
この手のエディタは例えば<div>と打つと自動で</div>も出してくれたりして
自動補完機能も充実しています。

あとは構文チェックサービスですね。
Web上にあります。

HTMLとCSSの文法チェックツール7選！よくある文法エラーも紹介

こういった形で、しっかりと開発しやすい環境を整えることで
コードのみに集中することが出来るので、是非導入してください。
※初心者ほど必要だと思う。

本題

要件は細分化すればするほど、部品を細かければすればするほど、やることが明確になってきます。
部品化を細かく出来ればそれだけ検索でコードの組み方も引っ掛けやすくなります。

「部品化」という言葉が難しければ、「手順」と捉えても良いです。
できるだけ短文で箇条書きに、主語述語目的語が1つ前後におさえます。

今回の場合は以下のように。

日付と金額を入力する
「入力」ボタンを押下する
ボタンを押下したら入力された日付と金額を取得する
テーブルに1行追加する
追加したテーブルに取得した日付と金額を設定する

ここからは「自分が全く検討つかないのがどの手順か」を考えます。
「入力する」は単に使う側の作業なのでフィールドがきちんと置かれれば良いですし、
現時点でも出来ていますね？

ということであれば2番目以降です。JavaScriptをここから組んでいくことになりますが、
JavaScriptはイベント駆動の言語です。

「ボタンを押された」「テキストが変更された」など、何かしらのイベントが起きた事を拾って処理が発生します。
そこから処理を考え、検索していきます。

下記に検索した結果で適当に持ってきたリンクを置いておいたので、参考にまず作ってみてください。
※「jQueryで」と書いてあるので勝手にjQuery関連の記事を持ってきています。

基本は「{言語名}　{やりたいこと}」で検索します（どの言語でも大抵これで良いです）

ボタンをクリックした

仕様：on()

入力値を取得する

仕様：val()

仕様：append()

jQueryで要素内のテキストを設定する：text()

仕様：text()

追記：

サーバーじゃなくてアプリに保存

Monacaとはいえ、結局Webブラウザから参照するものなので「Webサーバー」は関連します。
「データベース」と書けばよかったですね。

[Monaca データアプリに保存]などで検索
【Monaca】端末にデータを保存する手段に関して【勉強中】
Local Storageだとブラウザによって保存可能な容量が決まっているので、この記事の例だとSQLiteのほうがいいかもしれませんね。

Local Storageは確かに半永久的に（プログラムから削除指示出すか、ユーザーがデベロッパーツールで削除するか）生き続けるものですが、ずっと持っておくデータというよりは一時的に預けるような使い方のほうが多いように思います(少なくとも私は)
データベースに馴染みがなく、とりあえず学習のため、とかであれば使っても問題ないとは思います。

投稿2019/03/29 04:36

編集2019/03/29 05:17

m.ts10806

総合スコア80888

ベストアンサー

とりあえず

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('#f1').on('submit',function(e){
5    e.preventDefault();
6    var v_day=$("#day").val();
7    var v_money=$("#money").val();
8    if(v_day!=="" && v_money!==""){
9      $('#t1 tbody').append($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)));
10      $("#day,#money").val("");
11    }
12  });
13});
14</script>
15<p>入力</p>
16<form id="f1">
17<p>
18<input type="date" name="day" id="day">
19<input type="number" id="money" name="money"> 円
20<input type="submit" value="入力" class="kettei1">
21</p>
22</form>
23</div>
24</div>
25<div class="nokori">
26<p>今月の残り課金額</p>
27<p><output name="result" >0</output>円</p>
28</div>
29<br>
30<p>履歴</p>
31<table id="t1" border width="100%" height="20px">
32<thead>
33<tr>
34<th>日付</th>
35<th>金額</th>
36</tr>
37</thead>
38<tbody>
39</tbody>
40</table>