【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能，为表格添加光棒效果

最新推荐文章于 2023-04-23 17:34:04 发布

Acratons

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量642

点赞数 2

文章标签： jquery css js html

本文链接：https://blog.csdn.net/Acratons/article/details/110142683

版权

利用 jQuery 选择器实现表格的全选，取消选择，单击更
改选中状态，反选等功能。如图所示。点击全选按钮，选中所有行，点击取
消按钮，所有行为未选中状态，单击反选按钮，则选中的行变成未选中的；
未选中的行变成选中的。
在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="1.css">
    <script src="jquery-3.3.1.min.js"></script>
    <script>
    </script>
    <script src="1.js"></script>
</head>

<body>
    <button>全选</button>
    <button>取消选中</button>
    <button>反选</button>
    <table border="1" width="800" height="100" cellspacing="0">
        <tr class="head">
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr class="center">
            <td>1</td>
            <td>张1</td>
            <td>男</td>
            <td>11</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>2</td>
            <td>张2</td>
            <td>男</td>
            <td>22</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>3</td>
            <td>张3</td>
            <td>男</td>
            <td>33</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>4</td>
            <td>张4</td>
            <td>男</td>
            <td>44</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>5</td>
            <td>张5</td>
            <td>男</td>
            <td>55</td>
            <td>重庆市</td>
        </tr>
    </table>
</body>

</html>

css代码

.head {
    background-color: #898989;
    text-align: center;
}

.selected{
    background-color: pink;
}

js代码


$(document).ready(function() {
    //全选
    $("button:eq(0)").click(function () {
        $("tr").addClass("selected")
            .siblings(".head").removeClass("selected");
    })
    //取消全
    $("button:eq(1)").click(function () {
        $("tr").removeClass("selected")
            // .siblings(".head").addClass("selected");
    })
    //点击
    $(".center").click(function () {
        $(this).addClass("selected")
            .siblings().removeClass("selected");
    })
    //反
    $("button:eq(2)").click(function () {
        console.dir()
        // .siblings(".head").addClass("selected");
        $(".center").toggleClass("selected")
    })

    // $(".center").hover(
    //     function(){
    //         $(this).css("background","pink");
    //     },
    //     function(){
    //         $(this).css("background","");
    //     }
    // )
})

注释掉的就是为表格添加光棒效果
自行更改

Acratons

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能，为表格添加光棒效果

利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能。如图所示。点击全选按钮，选中所有行，点击取消按钮，所有行为未选中状态，单击反选按钮，则选中的行变成未选中的；未选中的行变成选中的。HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <l
复制链接

扫一扫