レシート入力フォームをHTML+Javascriptで作ったよー

　お買い物情報を入力すると、タブ区切りでテキストに出力するってプログラムを作ったよー。
　家計簿の入力にお使いください。
　自分で作って、自分で使ってます。
　ちなみに前にも似たようなプログラムを作っていますので、そちらもどうぞ。

　以下プログラム。

<html>
<head>
	<style>
		tr.odd  input{background:#FFFFFF;}
		tr.even input{background:#e6e6fa;}
	</style>
	<script language="JavaScript" type="text/javascript"> 
	function $(id){ return document.getElementById(id); };
	function F(elm){ elm.select(); };
	function LoopProc(f){for(var i=1;i<=$('itemcount').value;i++){ f(i); }};

	function BuildInputArea(){
		var strHTML	= "";
		
		$('divInputArea').innerHTML = '';
		
		strHTML += '<table border="0px">' + "\n";

		strHTML += "<tr>\n";
		strHTML += "<th>商品名</th><th>点数</th><th>単価</th><th>金額</th>\n";
		strHTML += "</tr>\n";
		LoopProc(function(i){
			strHTML += "<tr class='" + ((i%2==0)?"even":"odd") + "'>\n";
			
			var OutputTD = function(id,size,defval,align,option){
				strHTML += '<td>';
				strHTML += '<input type="text" id="' + id + i + '" size="' + size + '" value="'+defval+'" onFocus="F(this)" style="text-align:'+ align +'" '+option+'>';
				strHTML += '</td>';
			};

			OutputTD("item",   20, "",  "left",  "");
			OutputTD("count",   2, "1", "right", "");
			OutputTD("at",      4, "",  "right", "");
			OutputTD("amount",  6, "0", "right", "DISABLED");

			strHTML += "</tr>\n";
		});
		strHTML += "</table>\n";
		strHTML += '<input id="cmdCalc" type="button" value="金額を計算する" onClick="Calc()">'+"\n";
		strHTML += '<input type="button" value="データ作成!" onClick="BuildWorkResult()" ><br>' + "\n";
		strHTML += '<textarea id="csv_out" cols="55" rows="8" onFocus="F(this)">';
		
		$('divInputArea').innerHTML += strHTML;
	};
	
	function Calc(){
		LoopProc(function(i){$('amount'+i).value = $('count'+i).value * $('at'+i).value;});
	};

	function BuildWorkResult(){
		var strOutput = "";
		Calc();

		LoopProc(function(i){
			strOutput += $('date').value+"\t"+'"' + $('item'+i).value + '"'+"\t"+$('count'+i).value+"\t"+$('at'+i).value+"\t\t\t"+$('store').value+"\n";
		});

		$('csv_out').value  = strOutput;
	};
	</script> 
</head> 
<body> 
	<h1>レシート入力</h1> 
	<form onSubmit="return false">
		<table>
		<tr><td>年月日</td><td><input id="date" type="text" size="10" value=""></td></tr>
		<tr><td>店舗</td><td><input id="store" type="text" size="10" value=""></td></tr>
		<tr><td>購入点数</td><td><input id="itemcount" type="text" size="3" value="">点</td></tr>
		</table>
		<input id="cmdStart" type="button" value="入力開始" onClick="BuildInputArea()"><br>
		<br>
		<div id="divInputArea"> 
		</div> 
	</form> 
</body> 
</html>