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

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

ただいまの
回答率

90.53%

  • HTML

    11152questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7996questions

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

  • Monaca

    1092questions

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

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

解決済

回答 2

投稿 編集

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

rinneP2525

score 6

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>

イメージ説明

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

      <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>
<table id="t1" border="1">
<thead>
<tr>
<th>日付</th>
<th>金額</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
    <input type="reset" value="クリア">
    </div>
// 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!==""){
      $('#t1 tbody').append($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)));
      $("#day,#money").val("");
    }
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/03/29 13:56

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

    キャンセル

  • rinneP2525

    2019/03/29 14:05

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

    キャンセル

  • mts10806

    2019/03/29 14:18

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

    キャンセル

回答 2

+1

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

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

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

以下は私が利用しているBracketsの例
イメージ説明

少々重いですがPHPやJavaの開発でもよく用いられるEclipseでもチェックしてくれます。
イメージ説明
※都合によりエディタ部分だけ切り取ってます

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

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

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

本題

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

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

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

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

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

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

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

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

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

追記:

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

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

とりあえず

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#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)));
      $("#day,#money").val("");
    }
  });
});
</script>
<p>入力</p>
<form id="f1">
<p>
<input type="date" name="day" id="day">
<input type="number" id="money" name="money"><input type="submit" value="入力" class="kettei1">
</p>
</form>
</div>
</div>
<div class="nokori">
<p>今月の残り課金額</p>
<p><output name="result" >0</output></p>
</div>
<br>
<p>履歴</p>
<table id="t1" border width="100%" height="20px">
<thead>
<tr>
<th>日付</th>
<th>金額</th>
</tr>
</thead>
<tbody>
</tbody>
</table>


データの保持はLocalstorageとかですかね・・・
数値の合計とかどうするかよくわからないので保留

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/29 17:33 編集

    ありがとうございます、できました!

    コードは追記しておきます。

    データの保持はLocalstprageを使ってみようと思います!

    キャンセル

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

  • HTML

    11152questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7996questions

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

  • Monaca

    1092questions

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