1. Generator Fungsi Perbandingan:
Salin kode kode sebagai berikut:
/**
* Generator fungsi perbandingan
*
* @param icol
* Jumlah baris data
* @param sDataType
* Jenis data baris
* @kembali
*/
function generateCompareTrs (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) {
kembali -1;
} lain jika (vValue1> vValue2) {
Kembali 1;
} kalau tidak {
Kembali 0;
}
};
}
2. Jenis Karakter Perbandingan Proses:
Salin kode kode sebagai berikut:
/**
* Proses jenis bidang yang diurutkan
*
* @param svalue
* Nilai bidang default ke tipe karakter, yaitu, bandingkan kode ASCII
* @param sDataType
* Jenis lapangan hanya mendukung format mm/dd/yyyy atau mmmm dd, yyyyy (12 Januari 2004)
* @kembali
*/
function convert (sValue, sDataType) {
switch (sDataType) {
kasus "int":
return parseint (svalue);
kasus "float":
return parsefloat (svalue);
Kasus "Tanggal":
kembalikan tanggal baru (date.parse (sValue));
bawaan:
return svalue.tostring ();
}
}
3. Fungsi utama:
Salin kode kode sebagai berikut:
/**
* Urutkan kolom tabel berdasarkan tajuk tabel
*
* @param stabilid
* Tabel ID untuk memproses <tabel id = ''>
* @param icol
* ID kolom bidang misalnya: 0 1 2 3 ...
* @param sDataType
* Tipe data bidang int, float, tanggal diproses secara default.
*/
fungsi sorttable (stabilid, icol, sDataType) {
var otable = document.getElementById (stabilid);
var otbody = otable.tbodies [0];
var coldatarows = otbody.rows;
var atrs = array baru;
untuk (var i = 0; i <coldataarows.length; i ++) {
ATRS [i] = coldataRows [i];
}
if (otable.sortcol == icol) {
atrs.reverse ();
} kalau tidak {
ATRS.SORT (generateCompareTrs (ICOL, SDATATIPE));
}
var ofragment = document.createdocumentfragment ();
untuk (var j = 0; j <atrs.length; j ++) {
OfRagment.AppendChild (ATR [J]);
}
Otbody.AppendChild (ofRagment);
otable.sortcol = icol;
}
Encapsulate kode pertanyaan di atas ke dalam file JS dan merujuknya di halaman HTML.
Tes tes.html:
Salin kode kode sebagai berikut:
<html xmlns = "http://www.w3.org/1999/xhtml">
<Title> sortir kolom tabel </iteme>
<script type = "text/javascript" src = "js/sorttable.js"> </script>
<body>
<tabel border = "1" id = "tblsort">
<gaya itu = "Color: Red; Bgcolor: Blank">
<tr>
<tH OnClick = "Sorttable ('tblsort', 0);"
<tH OnClick = "Sorttable ('tblsort', 1, 'int');"
<tH Onclick = "Sorttable ('tblsort', 2, 'date');"
</tr>
</thead>
<tbody>
<tr>
<td> a </td>
<td> 1 </td>
<td> 5/9/2008 </td>
</tr>
<tr>
<td> b </td>
<td> 3 </td>
<td> 6/9/2008 </td>
</tr>
<tr>
<td> d </td>
<td> 6 </td>
<td> 5/4/2008 </td>
</tr>
<tr>
<td> e </td>
<td> -5 </td>
<td> 5/4/2007 </td>
</tr>
<tr>
<td> h </td>
<td> 34 </td>
<td> 5/8/2008 </td>
</tr>
<tr>
<td> c </td>
<td> 12 </td>
<td> 1/4/2018 </td>
</tr>
</tbody>
</boable>
</body>
</html>