昨日は、彼はまた、この効果を書き込もうとしましたので、私はまだだけの単純なJSは、パッケージを使用していないことを考えると、フォームの並べ替えについてのエッセイを見ました。最適化されないことがあり、原則アイデアがある：行がソート追加バックTBODYをソートした後、比較TDの対象となるTR、TRオブジェクトを取得します。次のとおりです。
次のようなスタイルは、次のとおりです。
<スタイル>
THEAD TR TD {
カーソル：ポインタ。
}
THEAD TR TD：ホバー{
テキスト装飾：下線;
}
</スタイル>
次のように構造化：
<TABLE>
<THEAD>
<TR>
<TD>姓名</ TD>
<TD>性别</ TD>
<TD ID = "スコア">成绩</ TD>
</ TR>
</ THEAD>
<TBODY>
< TR>
<TD> HOHO </ TD>
<TD>女</ TD>
<TD> 65 </ TD>
</ TR>
<TR>
<TD>笑</ TD>
<TD>男</ TD>
< TD> 73 </ TD>
</ TR>
<TR>
<TD>笑</ TD>
<TD>女</ TD>
<TD> 67 </ TD>
</ TR>
</ TBODY>
</ TABLE>
JSコード：
<SCRIPT>
VARスコア=のdocument.getElementById（ 'スコア'）;
VARのTBODY = document.getElementsByTagName（ 'TBODY'）[0]; // tbdoyの内の最初の文書を取得
VAR tbody.getElementsByTagName TR =（ 'TR' ）; TBODYにおける// GET TR（アレイ）
VAR ARR = [];
VAR = isAsc trueに; //は正シーケンス電流ソートするかどうかを決定
score.οnclick=関数（）{
IF（isAsc）{//抗なら！行われているものの動作シーケンス
のために（VAR I = 0、I <tr.length; I）{
arr.push（TR [I]）; //は、配列ARRにTR配列をコピー
}
arr.sort（関数（Tr1と、 TR2）{//配列ソーティングarr.sort（）
VAR VALUE1 = tr1.getElementsByTagName（ 'TD'）[2] .innerHTML;
VAR値2 = tr2.getElementsByTagName（ 'TD'）[2] .innerHTML、
リターンvalue2.localeCompare （値1）; // localeCompare（）メソッドは、値2> VALUE1場合、文字列を比較する方法を提供するリターン1、値2 <値1、-1。それは0に等しいです
}）。
Oinsert（）; //は、文書に対する操作を追加
真isAsc =; //をクリックした後、逆の順序のビット
}他{//それが正である場合は、次の操作を行う
（I = 0 VAR; iについて <tr.length; I） {
arr.push（TR [I]）;
}
arr.sort（関数（TR1、TR2である）{
VAR VALUE1 = tr1.getElementsByTagName（ 'TD'）[2] .innerHTML;
VAR値2 = tr2.getElementsByTagName（ 'TD' ）[2] .innerHTML;
リターンvalue1.localeCompare（値2）;
}）;
Oinsert（）;
isAsc = falseに;
}
}
Oinsert（）{//ドキュメントに追加するには、ソートノードされている機能
VARフラグメント= document.createDocumentFragment（）; //ドキュメントの最後には、あなたが抽出文書の一部、変更、追加、または削除内容にしたいとに挿入することができ使用createDocumentFragment（）メソッド
のための（VAR J = 0; J <arr.length; J）{
fragment.appendChild（ARR [J]）; //ノードの子ノードのリストの末尾に、アレイ内の要素を追加
}
TBODY。 appendChild（断片）; //フラグメントTBODYに追加
}
</ SCRIPT>
インタフェースの実行：
あなたが効果を見ることができるコードをコピーしてください！
