これは大きい順や小さい順に並び替えるのではなく単純に順番を逆にする方法です。
JavaScriptで、大きい順や小さい順に並び替えたいとき（ソート）には
sort
関数を使いますが、今回は触れません。
テーブル（表）の順序を逆にする関数
var swap=function(id){
var elem=document.getElementById(id);
if(!elem){return;}
var tr_elems=elem.getElementsByTagName('tr');
var min=0,max=tr_elems.length-1;
while(min<max){
var td_min=tr_elems[min].getElementsByTagName('td');
var td_max=tr_elems[max].getElementsByTagName('td');
var tmp1=td_min[0].innerHTML;
var tmp2=td_min[1].innerHTML;
td_min[0].innerHTML=td_max[0].innerHTML;
td_min[1].innerHTML=td_max[1].innerHTML;
td_max[0].innerHTML=tmp1;
td_max[1].innerHTML=tmp2;
min++;
max--;
}
}
HTMLで表を書くときは下のような構造になります。
<table id="mejirushi" > <tr> <td>1</td> <td>一個</td> </tr> <tr> <td>10</td> <td>十個</td> </tr> <tr> <td>100</td> <td>百個</td> </tr> <tr> <td>1,000</td> <td>千個</td> </tr> <tr> <td>10,000</td> <td>万個</td> </tr> </table>
このソースは下のテーブルを表示します。
| 1 | 一個 |
| 10 | 十個 |
| 100 | 百個 |
| 1,000 | 千個 |
| 10,000 | 万個 |
tr が表の縦、 td が横を表します。このテーブルは縦5列、横2列の表です。
この中でいちばん上にある一個をいちばん下に、一番上には万個を行かせます。
テーブルには、 id="mejirushi"
として、mejirushiという名のidが振ってあります。
このidを目印にHTML全体の中から、tableを探します。
//idがmejirushiの要素を全体から探してelemに入れなさい var elem=document.getElementById('mejirushi'); //もし見つからなければ終了（エラー対策） //if(!elem) --- もし（if）、elemがなかった（!）ならば終了（return） if(!elem){return;} //elemの中からtrタグを全部探してtr_elemsに入れなさい var tr_elems=elem.getElementsByTagName('tr'); //minに数字の0を割り当て //maxにtr_elemsに入っているtrタグの数から1引いた数字を入れなさい var min=0,max=tr_elems.length-1;
minが１ではなく0、maxがtrの個数の5ではなく4です。 コンピュータプログラミングにおいて、最初の数は1ではなく0です。
これがいかに合理的に考えられている数字の割り当てかは、プログラミングをたくさんやるとわかりますが、今回は説明しません。
//minがmaxよりも小さい間{から}の間を繰り返しなさい while(min<max){ //min個目のtrの中からtdタグを探してtd_minに全部入れなさい var td_min=tr_elems[min].getElementsByTagName('td'); //max個目のtrの中からtdタグを探してtd_maxに全部入れなさい var td_max=tr_elems[max].getElementsByTagName('td');
ここで、td_minの中身とtd_maxの中身を入れ替えたいのですが、いきなり中身を上書きすると元のデータが消えてしまうので、いったん別の場所にコピーします。
//1個目（０）のtd_minの中身をtmp1にコピーしなさい var tmp1=td_min[0].innerHTML; //2個目（1）のtd_minの中身をtmp2にコピーしなさい var tmp2=td_min[1].innerHTML; //1個目（0）のtd_maxの中身をtd_minの1個目（0）にコピーしなさい td_min[0].innerHTML=td_max[0].innerHTML; //2個目（1）のtd_maxの中身をtd_minの2個目（1）にコピーしなさい td_min[1].innerHTML=td_max[1].innerHTML; //（保存していた）tmp1の中身をtd_maxの1個目（0）にコピーしなさい td_max[0].innerHTML=tmp1; //（保存していた）tmp2の中身をtd_maxの2個目（1）にコピーしなさい td_max[1].innerHTML=tmp2;
これで、いちばんはじめの中身と、いちばん最後の中身が入れ替わりました。
続いてはじめから2番目の中身と、最後から2番目の中身を同じように入れ替えます。
そのためにはminとmaxの数字を変えれば済みます。
//minの数を１つ増やしなさい min++; //maxの数を１つ減らしなさい max--; }
こうしていって、minがmaxと同じか、minの方が大きくなった瞬間にプログラムは終了します。
実際に上のスクリプトを使って、表の順番を並び替えているのが下のTwitterです。 Twitterで愛の劇場
ボタンのソース
<input type="button" value="古いのを上にする" onclick=" swap('twitter'); this.value=this.value=='古いのを上にする'?'新しいのを上にする':'古いのを上にする';"/>
