jQueryでフォーム追加したりフォームの入力値が変わったタイミングで合計額を出力する
こんな感じのやつをつくりました。
http://49.212.208.186/trial/public/test/yachin
きょうのガッテン
- .clickは後から追加した要素では発動しないので、.onを使う
- .eq()でインデックスで要素を指定できる
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head> <body> <script> google.load("visualization", "1", {packages:["corechart"]}); jQuery(document).ready(function($) { //グラフ描画 calc(); // "品目の追加"ボタン押下か？ $('#btn_add').click(function(){ var new_list = '<li><input type="text" size="30" class="hinmoku"/>' + ' <input type="text" size="20" class="price"/><input type="button" value="削除" class="delete">' +'</li>'; $('#order_list').append(new_list); }); //削除ボタン押下か？ $(document).on('click', '.delete', function(e) { var idx = $(e.target).parent().index(); $('#order_list > li').eq(idx).remove(); //グラフ再描画 calc(); }); //金額か名前変更か？ $(document).on('change','.price,.hinmoku',function(e){ //グラフ再描画 calc(); }); //グラフ描画と合計金額算出 function calc(){ var sum_price = 0; var graph_data = []; graph_data.push(['hoge', 'hoge']); $('.price').each(function(e){ var this_price = parseInt($(this).val()); if($.isNumeric(this_price)){ //グラフのインプットになる配列に品目と金額を追加 var this_name = $(this).prev("input").val(); graph_data.push([this_name,this_price]); sum_price = this_price + sum_price; } }); //合計値反映 $('#sum').text(sum_price); //グラフ出力 var data = google.visualization.arrayToDataTable(graph_data); var chart = new google.visualization.PieChart(document.getElementById('piechart')); var options = {title:"合計金額:"+sum_price}; chart.draw(data,options); } }); </script> <h2>家計簿</h2> <ul> <li> 支出<br> <ol id="order_list"> <li> <input type="text" size="30" class="hinmoku" value="家賃"/> <input type="text" size="20" class="price" value="50000"/> </li> <li> <input type="text" size="30" class="hinmoku" value="電気"/> <input type="text" size="20" class="price" value="5000"/> </li> <li> <input type="text" size="30" class="hinmoku" value="ガス"/> <input type="text" size="20" class="price" value="3000"/> </li> <li> <input type="text" size="30" class="hinmoku" value="メンマ"/> <input type="text" size="20" class="price" value="3000"/> </li> </ol> <input type="button" value="品目の追加" id="btn_add"> </li> <li> <p> 合計:<span id="sum"></span> </p> </li> <li> <p id="piechart"></p> </li> </ul> </body> </html>
