jQuery 节点遍历应用-选中行/列特效

最新推荐文章于 2021-09-04 13:18:35 发布

fiona_0427

最新推荐文章于 2021-09-04 13:18:35 发布

阅读量176

点赞数

文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/fiona_0427/article/details/106197117

版权

1.要求选中表格中某个单元格时，整行背景色被改变

分析：

1.获取所有的td

2.给td设置点击事件

3.获取当前td的父元素

4.进行排他设计，给给获取到的父元素设置背景颜色，其余元素设置为白色。

代码：

<body>
    点击选行
    <table id="table">
        
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>学校</th>
            <th>相关操作</th>
        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
    </table>
</body>
<script>
      var arr=$('#table td');
      for(let i=0;i<arr.length;i++){
            arr[i].onclick=function(){
                $(this).parent().css('backgroundColor','grey')//排他设计
                $(this).parent().siblings().css('backgroundColor','white')
            }
        }
</script>

效果：

点击后

2..要求选中表格中某个单元格时，整列背景色被改变（不包括标题）

分析：

1.获取所有的td

2.设置点击事件

3.获取当前td的索引，遍历父元素的所有兄弟元素，确定父元素的兄弟元素的子元素的相同索引

4.（排他设计）其余元素设置为白色，给当前同一索引元素设置背景颜色

ps：在遍历tr时请注意，要求标题不被选中

代码：

<body>
    点击选列
    <table id="table2">
        
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>学校</th>
            <th>相关操作</th>
        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>

        </tr>
    </table>
</body>
<script>
        $('#table2 td').each((index,el)=>{
            el.onclick=function(){
                $('#table2 td').css('backgroundColor','white');
                var n=$(this).index();   //index()--是父元素的第几个子元素？
                $('#table2 tr').slice(1,5).each((index,el)=>{
                    $(el).children().eq(n).css('backgroundColor','grey')
                })
            }
        })
</script>

效果：

点击后：

此处请注意两点：

1.如何选取到同列元素

a：判断该元素属于父元素的第几个元素，获取索引

b：遍历父元素的同级元素时，按照索引得到同列元素

jQuery中封装了此方法--index（）：返回指定元素相对于其他指定元素的 index 位置。如果未找到元素，index() 将返回 -1。

原生js写法：

        是父元素的第几个子元素？
        Object.prototype.index1=function(){
            var arr=this.parentElement.children;
            for(let i=0;i<arr.length;i++){
                if(arr[i]===this){
                    return i;
                }
            }
        }

2.如何过滤标题所在行

a：可通过first(),not()等方法进行过滤，后文会进行介绍

b：此处介绍slice方法--slice() 方法选取基于索引的元素的子集。

语法：$(selector).slice(start,stop)

start 参数是创建子集的开始索引（从 0 开始），stop 参数是一个可选的结束点。

fiona_0427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 节点遍历应用-选中行/列特效

1.要求选中表格中某个单元格时，整行背景色被改变分析：1.获取所有的td2.给td设置点击事件3.获取当前td的父元素4.进行排他设计，给给获取到的父元素设置背景颜色，其余元素设置为白色。代码：<body> 点击选行 <table id="table"> <tr> <th>姓名</th> <th>年龄&l...
复制链接

扫一扫