QUESTION 1 に、ソートを行う機能を追加する。これも DOM を使う。
01 <THEAD>
02 <TR>
03 <TH></TH>
04 <TH><LABEL><INPUT type="radio" value="1" name="sort">チーム</LABEL></TH>
05 <TH><LABEL><INPUT type="radio" value="2" name="sort">試合数</LABEL></TH>
06 <TH><LABEL><INPUT type="radio" value="3" name="sort" checked>勝</LABEL></TH>
07 <TH><LABEL><INPUT type="radio" value="4" name="sort">負</LABEL></TH>
08 <TH><LABEL><INPUT type="radio" value="5" name="sort">引分</LABEL></TH>
09 <TH><LABEL><INPUT type="radio" value="6" name="sort">勝率</LABEL></TH>
10 </TR>
11 </THEAD>
12
13 <!-- 変更のあったテーブルヘッダのみ -->
ラジオボタンが FORM エレメントの中に入っていないと上手く作動しないため、テーブル全体をダミーの FORM エレメントに入れてあります。
01 function calc() //ボタンをクリックしたときに呼び出される関数
02 {
03
04 //QUESTION 1 と同じなので省略。
05
06 //ソート対象を取得
07 var keySelecter = document.getElementsByName("sort");
08 //チェックボックスのオブジェクトを取得
09 var key;
10 for(i=0; i<keySelecter.length; i++) //全てのチェックボックスを調査
11 {
12 if(keySelecter[i].checked) //チェックされていた場合・・・
13 {
14 key = keySelecter[i].value; //その値を取得
15 }
16 }
17 if(!key) //ひとつもチェックされていなかった場合・・・
18 {
19 key = 3; //3をデフォルトで使用
20 }
21 //バブルソート
22 for(j=0; j<curentTbody.rows.length-1; j++) //全ての行に対して処理を行う
23 {
24 for(k=j+1; k<curentTbody.rows.length; k++) //以下を繰り返し処理
25 {
26 if(curentTbody.rows[j].cells[key].firstChild.nodeValue < curentTbody.rows[k].cells[key].firstChild.nodeValue)
27 { //基準となる項目の値を比較し、下の行のほうが大きい場合・・・
28 curentTbody.insertBefore(curentTbody.rows[k], curentTbody.rows[j]);
29 //上下を入れ替える
30 }
31 }
32 }
33 }
ソートのときに基準となる項目を取得しています。どのチェックボックスもチェックされていない場合は 3（勝数）を基準にします。
バブルソートアルゴリズム（正確には少し違います）によってソートをしています。
比較した2つを、insertBefore メソッドで入れ替えています。このメソッドは第一引数のノードを第二引数のノードの前に挿入します。 第一引数のノードがすでに存在する場合は、一旦それをノードツリーからはずしてから、改めてツリーの指定位置に挿入します。