用jQuery实现 表格数据上下交换顺序
有一个表格，表格有5条数据，旁边有向上和向下的按钮，点击向上，当前这行与上一行互换顺序，点击向下相反。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格数据上下行互换位置</title>
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//上移
$("input.upbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
//下移
var trLength = $("input.downbtn").length;
$("input.downbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != trLength - 1) {
$tr.next().after($tr);
}
});
});
});
</script>
</head>
<body>
<table border="1" cellpadding=0 cellspacing=0>
<tr>
<td>4</td>
<td>xxx44xxxx</td>
<td>2013-5-24</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>5</td>
<td>xxxx55xxx</td>
<td>2013-5-25</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>6</td>
<td>xxxx66xxx</td>
<td>2013-5-26</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>7</td>
<td>xxxx77xxx</td>
<td>2013-5-27</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>8</td>
<td>xxx88xxxx</td>
<td>2013-5-28</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
</table>
</body>
</html>jquery 获取第一个元素的方法
我们经常能够用jquery 获取一组dom对象，但是我们只想操作第一个元素时，有什么好方法来用 jquery 第一个元素的呢，用jquery 第一个元素很简单，用到了筛选的方法，假设有这样一段一组列表：
<ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> </ul>
我们要取到11 所在的 li 元素，有一下几种方法：
$('ul').find('li:first');
$('ul li:first');
$('ul li').eq(0);这几种方法，就是常用的 jquery 取得第一个元素的方法
jquery获取最后一个元素
$('ul').find('li:last');
$('ul li:last');
var th = $("ul li").length;
$('ul li').eq(th - 1);评论列表
发表评论
热评文章
相关阅读
