　HOME　SITE　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　テーブル入力・計算　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　s2-19s.html　　　　　　　　　　2015-01-02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="Shift_JIS">
　<title></title>
</head>
<body>
　<table border="1" cellspacing="0" style="font-size : 10pt;">
　　<tbody>
　　　<tr><td align="center">品名</td><td align="center">単価</td><td align="center">数</td><td align="center">金額</td></tr>
　　　<tr>
　　　　<td>リンゴ</td>
　　　　<td id="tanka1" align="right">100</td>
　　　　<td><input type="text" style="border:none; text-align:right;" id="kazu1" onkeyup="s1();" /></td>　//--- <td><form><input-- に出来ない？。
　　　　<td id="gaku1" align="right"></td>　//----------------------------------------- / スラッシュの意味は？、必要か？。
　　　</tr>
　　　<tr>
　　　　<td>ミカン</td>
　　　　<td id="tanka2" align="right">15</td>
　　　　<td><input type="text" style="border:none; text-align:right;" id="kazu2" onkeyup="s1();" /></td>
　　　　<td id="gaku2" align="right"></td>
　　　</tr>
　　　<tr>
　　　　<td>合計</td>
　　　　<td align="center">－－－</td>
　　　　<td id="kazu" align="right"></td>
　　　　<td id="gaku" align="right"></td>
　　　</tr>
　　</tbody>
　</table>
　<script type="text/javascript">
　　function s1() {
　　　var v_tanka1 = document.getElementById( "tanka1" ).innerHTML ; //------------- value では金額が NaN (非数値) になる。
　　　var v_tanka2 = document.getElementById( "tanka2" ).innerHTML ;
　　　var v_kazu1 = document.getElementById( "kazu1" ).value ;　//------------------ innerHTML では金額が 0 になる。
　　　var v_kazu2 = document.getElementById( "kazu2" ).value ;
　　　var kari = v_tanka1 * v_kazu1 ;
　　　var gaku1 = kari.toLocaleString();　//-------------------------------------- ３桁区切りに変換。
　　　var kari = v_tanka2 * v_kazu2 ;
　　　var gaku2 = kari.toLocaleString();
　　　var kari = v_tanka1 * v_kazu1 + v_tanka2 * v_kazu2 ;
　　　var gaku = kari.toLocaleString();
　　　document.getElementById( "gaku1" ).innerHTML = gaku1 ;
　　　document.getElementById( "gaku2" ).innerHTML = gaku2 ;
　　　document.getElementById( "kazu" ).innerHTML = v_kazu1 * 1 + v_kazu2 * 1 ;　//--- v_kazu1 + v_kazu2 では文字の加算になる、 value では値が出ない。
　　　document.getElementById( "gaku" ).innerHTML = gaku ;
　　}
　</script>
</body>
</html>

Windows 7 SP1
Internet Explorer 11

実行　数を入力

品名	単価	数	金額
リンゴ	100
ミカン	15
合計	－－－

他の方法 Number()

計算　文字 → 数値変換