<!DOCTYPE html>
<html>
<head>
<title>sort.html</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>序號</th>
<th>內容</th>
<th>排序</th>
</tr>
</thead>
<tbody class="table">
<tr>
<td>1</td>
<td>內容一</td>
<td><a href="javascript:void(0)" class="top">置頂</a> <a
href="javascript:void(0)" class="upbtn">上</a> <a
href="javascript:void(0)" class="downbtn">下</a> <a
href="javascript:void(0)" class="bottom">置底</a></td>
</tr>
<tr>
<td>2</td>
<td>內容二</td>
<td><a href="javascript:void(0)" class="top">置頂</a> <a
href="javascript:void(0)" class="upbtn">上</a> <a
href="javascript:void(0)" class="downbtn">下</a> <a
href="javascript:void(0)" class="bottom">置底</a></td>
</tr>
<tr>
<td>3</td>
<td>內容三</td>
<td><a href="javascript:void(0)" class="top">置頂</a> <a
href="javascript:void(0)" class="upbtn">上</a> <a
href="javascript:void(0)" class="downbtn">下</a> <a
href="javascript:void(0)" class="bottom">置底</a></td>
</tr>
<tr>
<td>4</td>
<td>內容四</td>
<td><a href="javascript:void(0)" class="top">置頂</a> <a
href="javascript:void(0)" class="upbtn">上</a> <a
href="javascript:void(0)" class="downbtn">下</a> <a
href="javascript:void(0)" class="bottom">置底</a></td>
</tr>
<tr>
<td>5</td>
<td>內容五</td>
<td><a href="javascript:void(0)" class="top">置頂</a> <a
href="javascript:void(0)" class="upbtn">上</a> <a
href="javascript:void(0)" class="downbtn">下</a> <a
href="javascript:void(0)" class="bottom">置底</a></td>
</tr>
</tbody>
</table>
<a href="javascript:void(0)" οnclick="javascript:cancleRank();">取消排序</a>
</body>
<script type="text/javascript">
$(document).ready(function () {
//上移
var $upbtn = $(".upbtn")
$upbtn.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
$tr.css("color","#f60");
colorcancel();
}
});
//下移
var $downbtn = $(".downbtn");
var len = $downbtn.length;
$downbtn.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != len - 1) {
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
$tr.css("color","#f60");
colorcancel();
}
});
//置頂
var $top = $(".top");
$top.click(function(){
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$("tbody").prepend($tr);
$tr.css("color","#f60");
colorcancel();
}
});
//置底
var $bottom = $(".bottom");
var length = $bottom.length;
$bottom.click(function(){
var $tr = $(this).parents("tr");
if ($tr.index() != length-1) {
$tr.fadeOut().fadeIn();
$("tbody").append($tr);
$tr.css("color","#f60");
colorcancel();
}
});
});
//初始化列表
var initList = [], domArr = [];
$('tbody tr').each(function(a){
initList[a] = $(this).html();
})
//取出所有tr放進數組
function getDom(){
$('tbody tr').each(function( m ){
domArr[m] = $(this);
});
}
//取消排序
function cancleRank(){
getDom();
$.each(initList,function(b){
$.each(domArr,function(c){
if(domArr[c].html() == initList[b]){
$('table tbody').append(domArr[c]);
}
});
});
$('tbody tr').each(function(){
$(this).css("color","");
})
}
//取消顏色高亮
function colorcancel(){
$('tbody tr').each(function(){
var index = $(this).index()+1;
var serialnumber = $(this).find("td:first").text();
if(index == serialnumber){
$(this).css("color","");
}
});
}
</script>
</html>
