ホームページ  >  記事  >  ウェブフロントエンド  >  JS はテーブル フィールドのsorting_javascript スキルを実装します

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

WBOY
WBOYオリジナル
2016-05-16 16:59:351136ブラウズ

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){
文字タイプ:




コード

/**
* 並べ替え用のフィールド タイプ 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" >
<タイトル>
< スクリプトタイプ = "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 >






声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。