book.html
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
3
<html xmlns="http://www.w3.org/1999/xhtml">4
<head>5
<title></title>6
<script type="text/javascript" src="JS/jquery.js"></script>7
<script type="text/javascript" src="JS/alice.js"></script>8
<link rel="Stylesheet" href="css/alice.css" />9
10
</head>11
<body>12
<table border="0" class="sortable paginated">13
<thead>14
<tr>15
<th></th>16
<th class="sort-alpha">Title</th>17
<th class="sort-alph">Author(s)</th>18
19
<th class="sort-date">Publish Date</th>20
<th class="sort-numeric">Price</th>21
</tr>22
</thead>23
<tbody>24
<tr>25
<td><img src="image/1847190871.jpg"width="49" height="61" alt="Building Websites with Joomla! 1.5 Beta 1" /></td>26
27
<td>Building Websites with Joomla! 1.5 Beta 1</td>28
<td>Hagen <span class="sort-key">Graf</span></td>29
<td>Feb 2007</td>30
<td>$40.49</td>31
</tr>32
<tr>33
34
<td><img src="image/1847190901.jpg"width="49" height="61" alt="Learning Mambo: A Step-by-Step Tutorial to Building Your Website" /></td>35
<td>Learning Mambo: A Step-by-Step Tutorial to Building Your Website</td>36
<td>Douglas <span class="sort-key">Paterson</span></td>37
<td>Dec 2006</td>38
<td>$40.49</td>39
</tr>40
41
<tr>42
<td><img src="image/1847190979.jpg"width="49" height="61" alt="Moodle E-Learning Course Development" /></td>43
<td>Moodle E-Learning Course Development</td>44
<td>William <span class="sort-key">Rice</span></td>45
<td>May 2006</td>46
<td>$35.99</td>47
48
</tr>49
</tbody>50
</table>51
</body>52
</html>53
alice.js
Code$(document).ready(function(){
// var alternateRowColors = function($table) {
// $('tbody tr:odd', $table).removeClass('even').addClass('odd');
// $('tbody tr:even', $table).removeClass('odd').addClass('even');
// };
// $('table.sortable').each(function() {
// var $table = $(this);
// alternateRowColors($table);
// $('th', $table).each(function(column) {
// if ($(this).is('.sort-alpha')) {
// $(this).addClass('clickable').hover(function() {
// $(this).addClass('hover');
// }, function() {
// $(this).removeClass('hover');
// }).click(function() {
// var rows = $table.find('tbody>tr').get();
// rows.sort(function(a, b) {
// var keyA = $(a).children('td').text().toUpperCase();
// var keyB = $(b).children('td').text().toUpperCase();
// if (keyA < keyB) return -1;
// if (keyA > keyB) return 1;
// return 0;
// });
// $.each(rows, function(index, row) {
// $table.children('tbody').append(row);
// });
// alternateRowColors($table);
// });
// }
// });
// });
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
if ($(this).is('.sort-alpha')) {
$(this).addClass('clickable').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
var rows = $table.find('tbody>tr').get();
$.each(rows, function(index, row) {
row.sortKey = $(row).children('td').text().toUpperCase();//把循环出来的字母转换成大写
});
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -1;
if (a.sortKey > b.sortKey) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
});
}
});
});
});
alice.css
1 .clickable {
}{
2
cursor: pointer;
3
}
4
5 .hover {}{
6 text-decoration: underline;
7 }
8
.clickable {}{2
cursor: pointer;3
}4
5
.hover {}{6
text-decoration: underline;7
}8
