htmlテーブルタグの数値の合計を自動で計算

プログラムの解説

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 = htmlStr;
    }
</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>

コメント

タイトルとURLをコピーしました