zoukankan      html  css  js  c++  java
  • 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")
  • 相关阅读:
    对java中接口的简单理解
    jqgrid
    sed跨行匹配替换
    linux 安装 mysql
    mysql 导入或导出(mysqldump)数据
    spring boot slf4j + logback
    原码、反码、补码
    Java线程池(一)
    springboot 多环境配置及打包资源
    springboot自定义yaml配置文件
  • 原文地址:https://www.cnblogs.com/EleMMent/p/4130758.html
Copyright © 2011-2022 走看看