zoukankan      html  css  js  c++  java
  • jquery 表格(点击行或列,隐藏当前选中的行或列)

    NUM1:隐藏当前选中的行(点击当前选中行

    NUM2:隐藏当前选中的列(点击列标题)

    在前两篇的基础上加一些代码,大部分都相同。

    HTML:

    View Code
    <table border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>小文</td>
                        <td>20</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小李</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小慧</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>琪琪</td>
                        <td>19</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小勇</td>
                        <td>22</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>馨儿</td>
                        <td>23</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小鹏</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>鸭梨山大</td>
                        <td>30</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

    CSS:

    .hover{
                    background-color: #00f;
                    color: #fff;
                }

    NUM1‘s jquery code:

    $('tbody tr').hover(function(){
                        $(this).find('td').addClass('hover');
                    }, function(){
                        $(this).find('td').removeClass('hover');
                    }); 
                    $('tbody tr').click(function(){
                        $(this).hide();
                                        
                    });

    NUM2's jquery code:

    $('th').hover(function(){
                        //                    获取当前th的索引值
                        var col_index = $(this).index();
                        //                     alert(col_index);
                        //nth-child的参数值从1开始,故索引值加1
                        $('tbody td:nth-child('+(col_index+1)+')').addClass('hover');
                    }, function(){
                        //                    移出所有tr子元素的样式
                        $('tbody tr').children().removeClass('hover');
                    }); 
                   
                    $('th').click(function(){
                        
                        var col_index = $(this).index();
                        //                     alert(col_index);
                        //                    隐藏当前列标题
                        $(this).hide();
                        //nth-child的参数值从1开始,故索引值加1
                        $('tbody td:nth-child('+(col_index+1)+')').hide();
                    })
  • 相关阅读:
    android SQLite使用
    蓝牙从搜索到成功配对的全过程
    vscode 开发.net core 从安装到部署 教程详解
    ServiceStack 简单服务搭建
    MongoDB 安装配置
    request.url 端口 错误
    Python 之 hello world
    .NET DateTime 源码学习
    Parallel.For 平行算法 使用
    Thread.Join 和 Task.Wait 方法
  • 原文地址:https://www.cnblogs.com/wenzichiqingwa/p/2799350.html
Copyright © 2011-2022 走看看