javascriptでtableタグの数値を自動合計計算

プログラムの解説

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>