JS はテーブルフィールドのsorting_javascript スキルを実装します-jsチュートリアル-php.cn

1. 比較関数ジェネレーター:

 /* *
 * 比較関数ジェネレーター 
 * 
 * @param iCol
 * データ行数 
 * @param sDataType
 * 行のデータ型 
 * @return
*/
functiongenerateCompareTRs(iCol, sDataType) {
 return function CompareTRs(oTR1, oTR2) {
 vValue1 = Convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType) ); 
 vValue2 = Convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
 if (vValue1 < vValue2) {
 return -1;
 } else if (vVal ue1 ＆gt; vvalue2）{
文字タイプ：
 
 


コード
 

/**
* 並べ替え用のフィールドタイプ

* * @param sValue * フィールド値のデフォルトは文字タイプです。これは ASCII コード比較です * @param sDataType * フィールドtype は日付のみです。サポートされている形式は mm/dd/yyyy または mmmm dd,yyyy(2004 年 1 月 12 日) * @return*/

function Convert (sValue, sDataType) {

 switch (sDataType) {
 case "int" :
 return parseInt(sValue);
 case "float" :
 return parseFloat(sValue);
 case "date" :
 return new Date(Date.parse(sValue));
 デフォルト :
 return sValue.toString() ;
 }
}

 
3. メイン関数: 




 コードをコピー 


コードは次のとおりです: 

/**
* テーブルの列をテーブルヘッダーで並べ替えます

* * @param sTableID * 処理するテーブル ID * @param iCol * フィールド列 ID 例: 0 1 2 3 ... * @param sDataType * このフィールドのデータ型は、int、float、date です。デフォルトでは、文字列として処理されます。*/

function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
varcolDataRows = oTBody .rows;
var aTRs = new Array;
for ( var i = 0; i aTRs[i] =colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs. sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for ( var j = 0; j oFragment .appendChild(aTRs[j]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}

上記のコードを js ファイルにカプセル化して、html ページで参照します。

テスト test.html:

コードをコピーコードは次のとおりです:

< ; html xmlns = "http://www.w3.org/1999/xhtml" >
<タイトル>
< スクリプトタイプ = "text/javascript" src = "js/sortTable.js" >/ スクリプト >
< テーブルボーダー = "1" id = "tblSort" >
 = " color: red; bgcolor:blank" >
 th onclick = " sortTable('tblSort',2,'date');" style = "cursor: pointer" >日付 
 
 
 
 td >/ td >
 ; gt;
 

> t;
< 5/4/ 2007
> 34
; ;
< / tr >

JS はテーブル フィールドのsorting_javascript スキルを実装します

JS はテーブルフィールドのsorting_javascript スキルを実装します