JS控制table中tr位置互换

最新推荐文章于 2022-12-25 20:02:01 发布

weixin_30527423

最新推荐文章于 2022-12-25 20:02:01 发布

阅读量674

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/EleMMent/p/4130758.html

本文详细介绍了 CSS 中的 :nth-child() 选择器的使用方法，包括如何选择奇数或偶数索引的元素，并通过具体示例展示了如何在网页布局中应用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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> 元素：