HTML TIPS & TRICKS 2001/08

表計算を制する

QUESTION 1　勝率を計算せよ！

　ボタンを押すことによって、勝率を計算して新たに専用のセルに書き込む。ただし、 DOM を使う。

HTML

01 <TABLE border="0">
02     <COL style="width:1em;">
03     <COL style="width:4em;text-align:left;">
04     <COL style="width:4em;text-align:center;" span="5">
05     <THEAD>
06         <TR>
07             <TH></TH>
08             <TH>チーム</TH>
09             <TH>試合数</TH>
10             <TH>勝</TH>
11             <TH>負</TH>
12             <TH>引分</TH>
13             <TH>勝率</TH>
14         </TR>
15     </THEAD>
16     <TBODY id="tb">
17         <TR>
18             <TH>１</TH>
19             <TD>巨人</TD>
20             <TD>61</TD>
21             <TD>34</TD>
22             <TD>26</TD>
23             <TD>1</TD>
24             <TD></TD>
25         </TR>
        中略
26         <TR>
27             <TH>６</TH>
28             <TD>阪神</TD>
29             <TD>54</TD>
30             <TD>20</TD>
31             <TD>34</TD>
32             <TD>0</TD>
33             <TD></TD>
34         </TR>
35     </TBODY>
36 </TABLE>

L01

　オブジェクト取得のため、id 属性でIDを指定しています。

L02〜04

　この部分は純粋にスタイル指定だけのためのものなので、今回の内容にはほとんど関係ありません。

L05〜15

　計算には関係のない部分を、テーブルヘッダという形で分離しています。

L16〜35

　計算対象となる数値のある部分です。処理を簡単にするため、TBODY でグループ化し、id 属性で ID をつけてあります。

JavaScript

01 function calc()                                     //ボタンをクリックしたときに呼び出される関数
02 {
03     var curentTbody = document.getElementById("tb");//処理をするテーブルボディーのオブジェクト
04     for(i=0; i<curentTbody.rows.length; i++)        //行の数だけ繰り返す
05     {
06         win = parseInt(curentTbody.rows[i].cells[3].firstChild.nodeValue);
07                                                     //勝ち数を取得して文字列から整数に変換
08         loses = parseInt(curentTbody.rows[i].cells[4].firstChild.nodeValue);
09                                                     //負け数を取得して文字列から整数に変換
10         percentage = win / (win + loses);           //勝率を計算
11         percentage = percentage.toString();         //文字列に変換
12         percentage = percentage.substr(0, 5);       //小数点以下が3桁までになるように調整
13
14         curentCell = curentTbody.rows[i].cells[6];  //勝率を表示するセルのオブジェクト
15         if(curentCell.firstChild == null)           //セルの要素が存在しなかった場合・・・
16         {
17             curentCell.appendChild(document.createTextNode(percentage));
18                                                     //新たにオブジェクトを作って子ノードとして追加
19         }
20         else                                        //要素が存在した場合・・・
21         {
22             curentCell.firstChild.nodeValue = percentage;
23                                                     //値を更新
24         }
25     }
26 }

L03

　あらかじめつけておいた ID によって、処理対象となる TBODY エレメントのオブジェクトを取得しています。

L04

　curentTbody.rows は、TBODY エレメントでグループ化した範囲の全ての TR エレメントの数です。 そして、lengthプロパティでその数を取得しています。この数を超えない範囲で、次の行からの処理を繰り返します。

L06〜08

　各行の4番目と5番目のセルから、勝ち数と負け数を取得しています。そのままでは文字列なので、 parseInt メソッドを経由することで整数に変換しています。

L10〜11

　勝率を計算して、再び文字列に戻しています。

L12

　部分文字列を取り出しています。これによって小数点以下の桁数を調整しています。

L14

　処理を簡単にするために、勝率セルのオブジェクトを取得しています。

L15〜19

　まだセルに結果が設定されていなかった場合の処理です。テキストノードを作成し、セルの子ノードとしています。

L20〜24

　すでに1度計算されている場合の処理です。単に値を更新するだけで、テキストノードの追加は行いません。

トップページ