1. เครื่องกำเนิดฟังก์ชันเปรียบเทียบ:
คัดลอกรหัสรหัสดังนี้:
-
* เครื่องกำเนิดฟังก์ชันเปรียบเทียบ
-
* @param icol
* จำนวนแถวข้อมูล
* @param sdatatype
* ประเภทข้อมูลของแถว
* @กลับ
-
ฟังก์ชั่น generatecomparetrs (icol, sdatatype) {
การเปรียบเทียบฟังก์ชั่นส่งคืน (OTR1, OTR2) {
vvalue1 = แปลง (otr1.cells [icol] .firstchild.nodevalue, sdatatype);
vvalue2 = แปลง (otr2.cells [icol] .firstchild.nodevalue, sdatatype);
if (vvalue1 <vvalue2) {
กลับ -1;
} อื่นถ้า (vValue1> vValue2) {
กลับ 1;
} อื่น {
กลับ 0;
-
-
-
2. ประเภทอักขระเปรียบเทียบกระบวนการ:
คัดลอกรหัสรหัสดังนี้:
-
* ประมวลผลประเภทฟิลด์ที่เรียงลำดับ
-
* @param svalue
* ค่าฟิลด์เริ่มต้นเป็นประเภทอักขระนั่นคือเปรียบเทียบรหัส ASCII
* @param sdatatype
* ประเภทฟิลด์รองรับรูปแบบของ mm/dd/yyyy หรือ mmmm dd, yyyyy (12 มกราคม 2004)
* @กลับ
-
ฟังก์ชั่นแปลง (svalue, sdatatype) {
สวิตช์ (sdatatype) {
กรณี "int":
กลับ parseint (svalue);
กรณี "ลอย":
กลับ parsefloat (svalue);
กรณี "วันที่":
ส่งคืนวันที่ใหม่ (date.parse (svalue));
ค่าเริ่มต้น:
ส่งคืน svalue.toString ();
-
-
3. ฟังก์ชั่นหลัก:
คัดลอกรหัสรหัสดังนี้:
-
* เรียงลำดับคอลัมน์ตารางตามส่วนหัวของตาราง
-
* @param เสถียร
* ตารางตารางเพื่อประมวลผล <ตาราง ID = ''>
* @param icol
* คอลัมน์คอลัมน์ฟิลด์เช่น: 0 1 2 3 ...
* @param sdatatype
* ประเภทข้อมูลฟิลด์ int, ลอย, วันที่ถูกประมวลผลตามค่าเริ่มต้น
-
ฟังก์ชั่น sorttable (เสถียร icol, sdatatype) {
var otable = document.getElementById (StableId);
var otbody = otable.tbodies [0];
var coldatarows = otbody.rows;
var atrs = อาร์เรย์ใหม่;
สำหรับ (var i = 0; i <coldatarows.length; i ++) {
atrs [i] = coldatarows [i];
-
ถ้า (otable.sortcol == icol) {
atrs.reverse ();
} อื่น {
atrs.sort (generateComparetrs (ICOL, SDATATYPE));
-
var ofragment = document.createdocumentFragment ();
สำหรับ (var j = 0; j <atrs.length; j ++) {
OFRAGMENT.APPENDCHILD (ATRS [J]);
-
otbody.appendchild (Ofragment);
otable.sortcol = icol;
-
ห่อหุ้มรหัสคำถามข้างต้นลงในไฟล์ JS และอ้างอิงในหน้า HTML
ทดสอบทดสอบ. html:
คัดลอกรหัสรหัสดังนี้:
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> คอลัมน์ตารางเรียงลำดับ </title>
<script type = "text/javascript" src = "js/sorttable.js"> </script>
<body>
<table border = "1" id = "tblsort">
<theead style = "สี: สีแดง; bgcolor: blank">
<tr>
<th onclick = "sorttable ('tblsort', 0);"
<th onclick = "sorttable ('tblsort', 1, 'int');
<th onclick = "sorttable ('tblsort', 2, 'วันที่');
</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>
</table>
</body>
</html>