• 技术文章 >web前端 >前端问答

    jquery怎么隐藏table列

    长期闲置长期闲置2022-04-02 15:46:06原创287

    方法:1、利用find()和eq()方法根据指定列的索引值获取指定列的元素对象,语法为“tr元素对象.find('th或td元素对象:eq(索引值)')”;2、利用hide()方法将获取的指定列隐藏即可,语法为“指定列对象.hide()”。

    本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

    jquery怎么隐藏table列

    find() 方法返回被选元素的后代元素。

    eq() 方法返回带有被选元素的指定索引号的元素。

    索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。

    $(selector).eq(index)

    hide() 方法隐藏被选元素。

    $(selector).hide(speed,easing,callback)

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>123</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $(".btn1").click(function(){
    $('tr').find('th:eq(0)').hide(); 
    $('tr').find('td:eq(0)').hide();
    });
    $(".btn2").click(function(){
    $('tr').find('th:eq(0)').show(); 
    $('tr').find('td:eq(0)').show();
    });
    });
    </script>
    </head>
    <body>
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
    <button class="btn1">隐藏</button>
    <button class="btn2">显示</button>
    </body>
    </html>

    输出结果:

    +7.gif

    相关视频教程推荐:jQuery视频教程

    以上就是jquery怎么隐藏table列的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery中大写怎么转小写 下一篇:jquery中tr怎么删除id属性
    千万级数据并发解决方案

    相关文章推荐

    • jquery怎么修改input的name• jquery内div中能添加元素吗• jquery能获取input的值吗• jquery怎样排除第一个元素• jquery怎么让超链接不可用
    1/1

    PHP中文网