jQuery实现表格行上移下移和置顶的方法
本文实例讲述了jQuery实现表格行上移下移和置顶的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">
<title>jQuery实现表格行上移下移和置顶</title>
<metaname="keywords"content="jquery,滑动"/>
<metaname="description"content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。"/>
<linkrel="stylesheet"type="text/css"href="css/main.css"/>
<styletype="text/css">
.demo{width:600px;margin:60pxauto10pxauto;font-size:16px}
.table{border-collapse:collapse!important;width:100%;max-width:100%;margin-bottom:20px;}
.tabletd,.tableth{background-color:#fff!important;}
.table-borderedth,.table-borderedtd{border:1pxsolid#ddd!important;}
.tabletrtd{padding:8px;line-height:1.42857143;vertical-align:middle;border-bottom:1pxsolid#ddd;}
.tabletr:hover{background-color:#f5f5f5;}
</style>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<script>
$(function(){
//上移
var$up=$(".up")
$up.click(function(){
var$tr=$(this).parents("tr");
if($tr.index()!=0){
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
}
});
//下移
var$down=$(".down");
varlen=$down.length;
$down.click(function(){
var$tr=$(this).parents("tr");
if($tr.index()!=len-1){
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
}
});
//置顶
var$top=$(".top");
$top.click(function(){
var$tr=$(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table").prepend($tr);
$tr.css("color","#f60");
});
});
</script>
</head>
<body>
<divid="main">
<divclass="demo">
<tableclass="table">
<tr>
<td>HTML5获取地理位置定位信息</td>
<td>2015-04-25</td>
<td><ahref="#"class="up">上移</a><ahref="#"class="down">下移</a><ahref="#"class="top">置顶</a></td>
</tr>
<tr>
<td>CSS+Cookie实现的固定页脚广告条</td>
<td>2015-04-18</td>
<td><ahref="#"class="up">上移</a><ahref="#"class="down">下移</a><ahref="#"class="top">置顶</a></td>
</tr>
<tr>
<td>纯CSS3制作漂亮的价格表</td>
<td>2015-04-10</td>
<td><ahref="#"class="up">上移</a><ahref="#"class="down">下移</a><ahref="#"class="top">置顶</a></td>
</tr>
<tr>
<td>jQuery实现的测试答题功能</td>
<td>2015-03-29</td>
<td><ahref="#"class="up">上移</a><ahref="#"class="down">下移</a><ahref="#"class="top">置顶</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。