idやクラスを使わずテーブルの縦列の平均や和を求めてみた | ぽにょ、ぽにょぽーにょ

ぽにょ、ぽにょぽーにょ

2012年からWebエンジニア。
プログラムとか、趣味とか、人生とかの備忘録。

なんかアメブロってださくて使いづらいからそのうち引っ越しまふ。

仕事で動的に横幅が増えていくテーブルの
縦列の合計や平均を求める必要があって、
なんとかならないかと思ってつくった。

[学んだこと]
htmlでの値の取得方法

var t = document.getElementsByTagName("td");
// tdタグ要素11番目の値を取得
console.log(t[11].innerText);
// その値を書き換える
t[11].innerHTML="hoge";
// trの子要素ノードを取得
var t = document.getElementsByTagName("tr");
console.log(t[0].children.length);
■ノードはこの人の説明がわかりやすかった
http://taro4.blog37.fc2.com/blog-entry-26.html

// iの型を調べる
typeof(i);
StringだったらparseIntでIntに直す必要がある
td[2].innerHTML = parseInt(td[6].innerText) + parseInt(td[10].innerText);

↓ 以下テーブル
==================
<table>
<tr>
<th>項目</th>
<th>名前</th>
<th>縦列 計</th>
<th>縦列 計</th>
<th>縦列 平均</th>
</tr>
<tr>
<td>合計</td>
<td>-</td>
<td>縦列 計</td>
<td>縦列 計</td>
<td>縦列 平均</td>
</tr>
<tr>
<td>1</td>
<td>Aさん</td>
<td>100</td>
<td>50</td>
<td>503</td>
</tr>
<tr>
<td>2</td>
<td>Bさん</td>
<td>150</td>
<td>70</td>
<td>701</td>
</tr>
<tr>
<td>3</td>
<td>Cさん</td>
<td>80</td>
<td>30</td>
<td>300</td>
</tr>
</table>

<!-- js -->
<script type="text/javascript" src="<?=base_url() ?>js/tablecalc.js"></script>

以下js
===================
/*
 * 横の個数を求める
 * 縦の個数を求める
 * 最初のforは横の個数の考え
 * 次のfor縦の個数の考え
/*
 * こんな考え。td[2],td[3]に合計を入れる、みたいな
 * td[0] td[1] td[2]  td[3]
 * td[4] td[5] td[6]  td[7]
 * td[8] td[9] td[10] td[11]
 */

var tr = document.getElementsByTagName("tr");
// tr配下の子要素ノードを取得
// thの個数を求める(横の個数)
var thlen = tr[0].children.length;
// 縦の個数を調べる
td = document.getElementsByTagName("td");
var rowNum = td.length / thlen;

// 計算
// 最初はtd[2]からいれていくのでi=2からスタート
for(var i = 2; i < thlen; i++){
var tdNum = 0;
        // 縦列の計算
for (var m = 1; m < rowNum; m++){
tdNum += parseInt(td[i + m*thlen].innerText);
}
//合計はそのまま入れる
if(i == 4){ //平均のとき
// 平均を求める
tdNum = tdNum / (rowNum - 1);
// 少数点2位で四捨五入
// 普通にできないようなので、100かけて、小数点以下を四捨五入して100で割る
// まず100倍
tdNum = tdNum * 100;
// 小数点以下を四捨五入
tdNum = Math.round(tdNum);
// 100で割る
tdNum = tdNum / 100;
}
td[i].innerHTML = tdNum;
}

でもちょっときいてよ、、、
この結果をcsvに落としたいんですわ、、、
でもjsから直でcsvに落とすのはむりなんですね、、
一回サーバ側に渡すとか、データ数的に絶対おこられるし、
結局js使わずphpとかで計算して表示させた方がよさそうです。

涙。