<?php
	require("../__common__/__define_common.php");
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="ok.2nd">
<link rel="stylesheet" href="<?= _STYLE_SHEET_FOLDER ?>/tools_common.css?20110515" type="text/css">
<title>縦計だけの表計算</title>
<?php
	if (!defined("CALC_ROWS_NUM")) {
		define("CALC_ROWS_NUM", 20);
	}
	if (!defined("CALC_COLS_NUM")) {
		define("CALC_COLS_NUM", 6);
	}
	if (!defined("CALC_INPUT_SIZE")) {
		define("CALC_INPUT_SIZE", 20);
	}
?>
<style type="text/css">
body {
	margin: 10px;
}
#title{
	font-size: 120%;
	font-weight: bold;
}
#total {
	background-color: #ffffff;
}
.inputRow input {
	ime-mode: disabled;
}
td.totalRow {
	border-style: solid;
	border-color: #ff0000;
	border-width: 3px 0 0 0;
}
</style>
<script language="Javascript">
function calcSum(col) {
	total = 0;
	for (ix=1; ix<=<?= CALC_ROWS_NUM ?>; ix++) {
		inp = document.getElementById('input'+col+'_'+ix).value;
		if (inp != '') {
			if (!isNaN(inp)) {
				total += parseFloat(inp);
				document.getElementById('val'+col+'_'+ix).innerHTML = '';
			} else {
				val = evalNum(inp);
				document.getElementById('val'+col+'_'+ix).innerHTML = val;
				if (!isNaN(val)) {
					total += val;
				}
			}
		} else {
			document.getElementById('val'+col+'_'+ix).innerHTML = '';
		}
	}
	document.getElementById('total'+col).value = total;
}
function evalNum(str) {
	if (str == '') return 0;
	try {
		res = '<font color=green>'+eval(str)+'</font>';
	} catch(e) {
		return '<font color=red>Err</font>';
	}
	return res;
}
function cellClear(col) {
	for(ix=1; ix<=<?= CALC_ROWS_NUM ?>; ix++){
		document.getElementById('input'+col+'_'+ix).value = '';
		document.getElementById('val'+col+'_'+ix).innerHTML = '';
	}
	document.getElementById('total'+col).value = '';
}
</script>
</head>
<body bgcolor="#e0e0e0">
<p id="tool_title_area">
<a href="../tools/" class="return_index">■</a>
<span id="tool_title">縦計だけの表計算</span>
</p>
<form>
<table cellpadding=0 cellspacing=0>
<tr>
<?php
	for ($col=1; $col<=CALC_COLS_NUM; $col++) {
?>
	<td>
	<table cellpadding=0 cellspacing=0>
	<? for ($ix=1; $ix<=CALC_ROWS_NUM; $ix++) { ?>
	<tr>
	<td class="inputRow"><input type="text" id="input<?= $col ?>_<?= $ix ?>" size="<?= CALC_INPUT_SIZE ?>" value="" onChange="calcSum(<?= $col ?>)"><span id="val<?= $col ?>_<?= $ix ?>"></span></td>
	</tr>
	<? } ?>
	<tr>
	<td class="totalRow"><input type="text" id="total<?= $col ?>" size="<?= CALC_INPUT_SIZE ?>" value=""></td>
	</tr>
	</table>
	<input class="input_form_button" type="button" onClick="cellClear(<?= $col ?>)" value="クリア">
	</td>
<?php
	}
?>
</tr>
</table>
</form>
<p style="margin-top:10px; color:#808080;">
セルには()付きの数式を入力できます。eval()で評価していますので、数学関数(Math)なども使えます。<br>
数字以外は、JavaScriptとして評価して実行しますので、ご注意ください。<br>
例えば、「alert(Date());」なども実行できます。<br>
</p>
</body>
</html>
