プログラムの解説
javascriptを使ってテーブルを計算する。
document.getElementByIdでテーブルを取得。
.rows でテーブル内の全ての行のコレクションを返す。
例
var firstRow = mytable.rows[0]; // mytable の最初の行var lastRow = mytable.rows[ mytable.rows.length – 1 ]; // mytable の最後の行
プログラム
<html>
<script type="text/javascript">
window.onload = function () {
var tableElem = document.getElementById('table_01');
var rowElems = tableElem.rows;
var price = 0;
for (i = 0, len = rowElems.length - 1; i < len; i++) {
price += parseInt(rowElems[i].cells[1].innerText);
}
document.getElementById('goukei').innerText = price;
}
</script>
<body>
<TABLE id="table_01">
<TR>
<td>りんご</td>
<td>300</td>
</TR>
<TR>
<td>バナナ</td>
<td>400</td>
</TR>
<TR>
<td>いちご</td>
<td>500</td>
</TR>
<TR>
<td>合計</td>
<td id="goukei"></td>
</TR>
</TABLE>
</body>
</html>実行結果、こんな感じで合計を勝手に計算してくれる。
テーブルの行を追加しても問題ない。
価格と個数を掛けて小計と合計を出す方法
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var tableElem = document.getElementById('table_01');
var rowElems = tableElem.rows;
var price = 0;
for (i = 1, len = rowElems.length - 1; i < len; i++) {
rowElems[i].cells[3].innerText = parseInt(rowElems[i].cells[1].innerText * rowElems[i].cells[2].innerText);
price += parseInt(rowElems[i].cells[3].innerText);
}
document.getElementById('goukei').innerText = price;
}
</script>
<style>
td,th{
padding:3px 8px;
}
</style>
</head>
<body>
<TABLE id="table_01" border="1">
<TR>
<th>品物</th>
<th>価格</th>
<th>個数</th>
<th>小計</th>
</TR>
<TR>
<td>りんご</td>
<td>180</td>
<td>2</td>
<td></td>
</TR>
<TR>
<td>いちご</td>
<td>450</td>
<td>3</td>
<td></td>
</TR>
<TR>
<td>合計</td>
<td id="goukei" colspan="3"></td>
</TR>
</TABLE>
</body>
</html>
コメント