tableの要素取得と計算結果の表示 #HTML

JavaScriptを使って、tableの値の取得と表示を勉強したのでまとめました。
以下の表を例に、｢値段｣×｢個数｣の値を｢合計金額｣の欄に埋めていきます。

品物	値段	個数	合計金額
りんご	100	3
みかん	120	4
ぶどう	150	2

<!--ソース-->
<html>
<table>
<tr>
<td>品物</td><td>値段</td><td>個数</td><td>合計金額</td>
</tr>
<tr>
<td>りんご</td><td>100</td><td>3</td><td></td>
</tr>
<tr>
<td>みかん</td><td>120</td><td>4</td><td></td>
</tr>
<tr>
<td>ぶどう</td><td>150</td><td>2</td><td></td>
</tr>
</table>
</html>

HTML内のタグの要素の取得は

document.getElementsByTagName("タグ名")[番号].textContent; //番号は0始まり

を使います。
例えば、りんごの値段100円を取得する場合は、0始まりで5番目のtdタグなので

var value = document.getElementsByTagName("td")[5].textContent;     //変数valueに格納

となります。
同様にりんごの個数の取得は

var n = document.getElementsByTagName("td")[6].textContent;         //変数nに格納

valueとnを数値変換し、value*nをりんごの合計金額の欄に代入します。

document.getElementsByTagName("td")[7].textContent = Number(value)*Number(n);

品物	値段	個数	合計金額
りんご	100	3	300
みかん	120	4
ぶどう	150	2

for文を使って複数行の計算をすると

var value;
var n;
for(var i =0; i<3; i++){
    value = document.getElementsByTagName("td")[4*i + 5].textContent;
    n = document.getElementsByTagName("td")[4*i + 6].textContent;
    document.getElementsByTagName("td")[4*i + 7].textContent = Number(value)*Number(n);
}

品物	値段	個数	合計金額
りんご	100	3	300
みかん	120	4	480
ぶどう	150	2	300

ありがとうございました。

参考:https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName