>>0
HTML が致命的に間違っていますので，http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
でチェックして下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<style type "text/css">
.calc-form input { text-align: right; }
input[readonly] { background: #fcc; }
</style>
<script type="text/javascript">
// カンマを付加した文字列を返す
function encommas (value) {
return String (value).replace (/((?:^[-+])?\d{1,3})(?=(?:\d\d\d)+(?!\d))/g, '$1,');
}
// カンマを外した文字列を返す
function decommas (value) {
return value.replace (/,/g, '');
}
// 入力チェックしてカンマ付加する
function checkAndSetCommas (control) {
var v = control.value;
if (v.charAt (v.length - 1).match (/\d/))
control.value = encommas (decommas (v));
}
////////////////////
// 表計算のメイン関数
function keisan (control) {
getHorizonalSum (control);
getVerticalSum (control.form.elements);
}
// 単価×数量を計算する
function getHorizonalSum (control) {
var index = parseInt (control.name.charAt (control.name.length - 1));
var e = control.form.elements;
var c = {
tanka : e['tanka' + index],
suryo : e['suryo' + index],
sum : e['sum' + index]
};
// 暗黙の型変換で文字列→数値→文字列になっていることに注意
c.sum.value = encommas (decommas (c.tanka.value) * decommas (c.suryo.value));
checkAndSetCommas (c.tanka);
checkAndSetCommas (c.suryo);
}
// 総計を計算する
function getVerticalSum (controls) {
var result = 0;
var c, i = 0
// 番号が切れた時点で計算終了というバグを抱えているので注意
while (c = controls['sum' + i++])
result += parseInt (decommas (c.value));
controls['sougoukei'].value = encommas (result);
}
</script>
<form action="#">
<table summary="左から品名，単価，数量，合計。" class="calc-form">
<thead>
<tr>
<th>品名</th>
<th>単価</th>
<th>数量</th>
<th>合計</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">総計</th>
<td><input type="text" name="sougoukei" value="0" readonly="readonly"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>品 A</td>
<td><input type="text" name="tanka0" value="0" onkeyup="keisan (this); "></td>
<td><input type="text" name="suryo0" value="0" onkeyup="keisan (this); "></td>
<td><input type="text" name="sum0" value="0" readonly="readonly"></td>
</tr>
<tr>
<td>品 B</td>
<td><input type="text" name="tanka1" value="0" onkeyup="keisan (this); "></td>
<td><input type="text" name="suryo1" value="0" onkeyup="keisan (this); "></td>
<td><input type="text" name="sum1" value="0" readonly="readonly"></td>
</tr>
</tbody>
</table>
</form>
本番ならこんな組み方は絶対にしませんが，まあ練習程度に。
