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

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 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 sTa​​bleID * 処理するテーブル 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" >

/ スクリプト >

= " color: red; bgcolor:blank" >
th onclick = " sortTable('tblSort',2,'date');" style = "cursor: pointer" >日付 th >
tr >
thead >

td >/ td >
; gt;

> t;

> 34 td >
; ;

tbody >
table >
body >
html >