首頁 > 開發者 > JavaScript

javascript動作表格排序執行個體分析

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript動作表格排序執行個體分析

 　　本文執行個體講述了javascript動作表格排序的方法。分享給大家供大家參考。具體如下：

　　完整例子如下：

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<html>

<head>

<title>Table Sort Example</title>

<script type="text/javascript">

//轉換器，將列的欄位類型轉換為可以排序的類型：String,int,float

function convert(sValue, sDataType) {

switch(sDataType) {

case "int":

return parseInt(sValue);

case "float":

return parseFloat(sValue);

case "date":

return new Date(Date.parse(sValue));

default:

return sValue.toString();

}

}

//排序函數產生器，iCol表示列索引，sDataType表示該列的資料類型

function generateCompareTRs(iCol, sDataType) {

return function compareTRs(oTR1, oTR2) {

var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);

var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

if (vValue1 < vValue2) {

return -1;

} else if (vValue1 > vValue2) {

return 1;

} else {

return 0;

}

};

}

//排序方法

function sortTable(sTableID, iCol, sDataType) {

var oTable = document.getElementById(sTableID);

var oTBody = oTable.tBodies[0];

var colDataRows = oTBody.rows;

var aTRs = new Array;

//將所有列放入數組

for (var i=0; i < colDataRows.length; i++) {

aTRs[i] = colDataRows[i];

}

//判斷最後一次排序的列是否與現在要進行排序的列相同，

//是的話，直接使用reverse()逆序

if (oTable.sortCol == iCol) {

aTRs.reverse();

} else {

//使用數組的sort方法，傳進排序函數

aTRs.sort(generateCompareTRs(iCol, sDataType));

}

var oFragment = document.createDocumentFragment();

for (var i=0; i < aTRs.length; i++) {

oFragment.appendChild(aTRs[i]);

}

oTBody.appendChild(oFragment);

//記錄最後一次排序的列索引

oTable.sortCol = iCol;

}

</script>

</head>

<body>

<p>Click on the table header to sort in ascending order.</p>

<table border="1" id="tblSort">

<thead>

<tr>

<th onclick="sortTable('tblSort', 0)"

style="cursor:pointer">Last Name</th>

<th onclick="sortTable('tblSort', 1)"

style="cursor:pointer">First Name</th>

<th onclick="sortTable('tblSort', 2, 'date')"

style="cursor:pointer">Birthday</th>

<th onclick="sortTable('tblSort', 3, 'int')"

style="cursor:pointer">Siblings</th>

</tr>

</thead>

<tbody>

<tr>

<td>Smith</td>

<td>John</td>

<td>7/12/1978</td>

<td>2</td>

</tr>

<tr>

<td>Johnson</td>

<td>Betty</td>

<td>10/15/1977</td>

<td>4</td>

</tr>

<tr>

<td>Henderson</td>

<td>Nathan</td>

<td>2/25/1949</td>

<td>1</td>

</tr>

<tr>

<td>Williams</td>

<td>James</td>

<td>7/8/1980</td>

<td>4</td>

</tr>

<tr>

<td>Gilliam</td>

<td>Michael</td>

<td>7/22/1949</td>

<td>1</td>

</tr>

<tr>

<td>Walker</td>

<td>Matthew</td>

<td>1/14/2000</td>

<td>3</td>

</tr>

</tbody>

</table>

</body>

</html>

　　希望本文所述對大家的javascript程式設計有所協助。

        注：更多精彩教程請關注幫客之家圖文教程 頻道，

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More