JS控制table中tr位置互换 

<script type="text/javascript">
    function doit(f, t) {
        $("#tbl tr:nth-child(" + f + ")").insertAfter($("#tbl tr:nth-child(" + t + ")"));
    }
</script>
<table id="tbl">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
</table>
<input type="button" onclick="doit(1, 3);" value="click">

 其中:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

例如：

p:nth-child(2)
{
background:#ff0000;
}

即p元素是其父元素，表示页面中其父元素p的第二个子元素的背景色为#ff0000；

w3school例子：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

:odd 选择器 选取每个带有奇数 index 值的元素（比如 1、3、5）。

index 值从 0 开始，所有第一个元素是偶数 (0)。

最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素（如上面的例子）。

:even 选择器 选取每个带有偶数 index 值的元素（比如 2、4、6）。

index 值从 0 开始，所有第一个元素是偶数 (0)。

最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素.如

选择每个相隔的（偶数） <tr> 元素：

$("tr:even")

 

posted @ 2014-11-29 14:36  EleMMent  阅读(6886)  评论(1)  编辑  收藏  举报