jQuery的强大再次不再赘述
一般情况下操作表格式数据的一种最常见的任务就是排序，在一个大型的表格中，能够对要寻找的信息进行重新排列是非常重要的，一般情况用来完成排序的方式有两种
：一种是服务器端排序，另一种是javascript排序，今天就来说说第二种排序：即脚本排序
上代码
<table class="sortable">
<thead>
<tr>
<th></th>
<th class="sort-alpha">Title</th>
<th>Author</th>
<th>Publish Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Images/accent.png" />
</td>
<td>zuilding
</td>
<td>Hagen Graf
</td>
<td>Feb 2007
</td>
<td>$40.49
</td>
</tr>
<tr>
<td>
<img src="Images/bullet.png" />
</td>
<td>Learning
</td>
<td>Douglas Paterson
</td>
<td>Dec 2006
</td>
<td>$40.49
</td>
</tr>
<tr>
<td>
<img src="Images/accent.png" />
</td>
<td>Observations
</td>
<td>Hagen Graf
</td>
<td>Feb 2007
</td>
<td>$40.49
</td>
</tr>
<tr>
<td>
<img src="Images/accent.png" />
</td>
<td>Global
</td>
<td>Hagen Graf
</td>
<td>Feb 2007
</td>
<td>$40.49
</td>
</tr>
<tr>
<td>
<img src="Images/accent.png" />
</td>
<td>China's
</td>
<td>Hagen Graf
</td>
<td>Feb 2007
</td>
<td>$40.49
</td>
</tr>
</tbody>
</table>
以上就是做一个简单的排序的表格，按标题进行排序
<script type="text/javascript">
$(document).ready(function () {
//这个方法是对奇偶行样式的控制
var altercolumu = 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);
altercolumu($table);
$('th', $table).each(function (column) {
//遍历th标签找到class的属性为sort-alpha进行操作
if ($(this).is('.sort-alpha')) {
//设置鼠标移入和移除时的样式
$(this).addClass('.clickable').hover(function () {
$(this).addClass('.hover');
}, function () {
$(this).removeClass('.hover');
}).click(function () {
//在这里出发click事件时获取行元素的信息
var rows = $table.find('tbody > tr').get();
//这里主要调用sort这个方法进行排序
rows.sort();
rows.sort(function (a, b) {
var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
//重新排序后在进行显示的输出
$.each(rows, function (index, row) {
//这里面我用了append的方法因为这个方法不会复制节点，并且该方法会移动表格行而不是复制表格行
$table.children('tbody').append(row);
});
altercolumu($table);
});
}
});
});
});
</script>
这么一个小例子就完成了，可能写的不是很好，求指教
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
