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程序设计有所帮助。