idやクラスを使わずテーブルの縦列の平均や和を求めてみたを少し改良した。
最終的にはぽちぽち選んで、その行だけを表示させるようにしたい。
[機能追加]
・項番を動的に取得できるようにした。
・特定idをもったタグを削除（行を表示させなくする。）
・あと何となくjavascriptをfunctionにしてみる。
[注意点]
各種functionで定義したとき
上から呼ばれるため、呼び出す順番があるので注意
<script type="text/javascript" src="<?=base_url() ?>js/tableshow.js"></script>
<script type="text/javascript" src="<?=base_url() ?>js/tablecalc2.js"></script>
<script>
_tableAvgSum();
</script>
[ js ]
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 項番を表示されてる動的に表示
function _set_idx(thlen, rowNum){
if(rowNum <= 1){ // 行数が1のとき
// 合計もとめる欄しかないので何もしない
return;
}
// 計算
var i = 1;
for(var m = 1; m < rowNum; m++){
td[m*thlen].innerHTML = i++;
}
}
// 一番上の行に合計値や平均をのせる
function _tableAvgSum(){
/*
* 横の個数を求める
* 縦の個数を求める
* 最初の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;
// 項番を動的にふる
_set_idx(thlen, rowNum);
// 計算
// 最初はtd[2]からいれていくのでi=2からスタート
for(var i = 3; i < thlen; i++){
var tdNum = 0;
for (var m = 1; m < rowNum; m++){
tdNum += parseInt(td[i + m*thlen].innerText);
}
if(i == 5){ //平均のとき
// 平均を求める
tdNum = tdNum / (rowNum - 1);
// 少数点2位で四捨五入
// 普通にできないようなので、100かけて、小数点以下を四捨五入して100で割る
// まず100倍
tdNum = tdNum * 100;
// 小数点以下を四捨五入
tdNum = Math.round(tdNum);
// 100で割る
tdNum = tdNum / 100;
}
td[i].innerHTML = tdNum;
}
}
//特定id自体を非表示にする
function _delete_dom_obj_by_id(id_name){
// tableの行を非表示にしてみる
var v = document.getElementById(id_name);
var v_obj_parent = v.parentNode;
v_obj_parent.removeChild(v);
}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
html
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<table>
<tr>
<th>項目</th>
<th>名前</th>
<th>タイプ</th>
<th>縦列 計</th>
<th>縦列 計</th>
<th>縦列 平均</th>
</tr>
<tr>
<td>合計</td>
<td>-</td>
<td>-</td>
<td>縦列 計</td>
<td>縦列 計</td>
<td>縦列 平均</td>
</tr>
<tr id = "noShow">
<td>-</td>
<td>Aさん</td>
<td>a</td>
<td>100</td>
<td>50</td>
<td>503</td>
</tr>
<tr>
<td>-</td>
<td>Bさん</td>
<td>b</td>
<td>150</td>
<td>70</td>
<td>701</td>
</tr>
<tr>
<td>-</td>
<td>Cさん</td>
<td>c</td>
<td>80</td>
<td>30</td>
<td>300</td>
</tr>
</table>
<!-- js -->
<script type="text/javascript" src="<?=base_url() ?>js/tablecalc2.js"></script>
<script>
//ここも呼び出す順番注意
_delete_dom_obj_by_id("noShow");
_tableAvgSum();
</script>
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
