読者です 読者をやめる 読者になる 読者になる

jQueryでフォーム追加したりフォームの入力値が変わったタイミングで合計額を出力する

javascript

こんな感じのやつをつくりました。

f:id:a20130517:20150308213535p:plain
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>