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>

Qiitaコメントでさらに綺麗なコードに

Qiitaに投稿したらコメントでさらに綺麗なコードの書き方を教えて頂いた。

<html>
<body>
  <table>
    <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>

  <script>
    goukei.textContent = [...document.querySelectorAll('td:not(#goukei)')]
//数値ではない場合は0、数値だったら数値を返して数値だけの配列を生成する
//配列の数値を足し合わせる
      .map(e => isNaN(e.textContent) ? 0 : +e.textContent)
      .reduce((a, b) => a + b);
  </script>
</body>
</html>

querySelectorAll() メソッド
与えられた CSS セレクターに一致する文書中の要素のリストを示す静的なNodeList を返す。

:not()
CSS の擬似クラス、列挙されたセレクターに一致しない要素を表す。

/* '.fancy' クラスの中にない <p> 要素 */
p:not(.fancy) {
  color: green;
}
/* IDがgoukei以外のtd */
td:not(#goukei)

map() メソッド
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

textContent
Node のプロパティで、ノードおよびその子孫のテキストの内容を表す。

let text = document.getElementById('divA').textContent;
// 変数 text の値は 'This is some text!'

reduce()の使用例
配列のすべての要素の和を返す

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10