使用JQuery实现全选、反选、添加和删除功能

最新推荐文章于 2021-10-28 09:30:12 发布

qizhichao110

最新推荐文章于 2021-10-28 09:30:12 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery知识点

本文链接：https://blog.youkuaiyun.com/qizhichao110/article/details/8891937

JQuery知识点专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个用于管理学生就业信息的系统，包括全选、取消全选、反选、删除和添加功能，支持用户操作和数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

练习要求：

1.班级姓名薪水就业单位是否转正
2.全选，取消全选，反选
3.实现删除功能：删除一行或多行
4.实现添加功能。添加一行。

<head>
    <title></title>
     <style type="text/css">
        table
        {
            width: 600px;
            height: 400px;
        }
        table tr td
        {
            border: solid 1px #eee;
        }
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
    ///////////////全选/////////////////
        $(function () {
            $("#Checkbox7").click(function () {
                if ($("#chooseall").text() == "全选") {
                    $("table :checkbox").attr("checked", true);
                    $("#chooseall").text("取消全选");
                }
                else {
                    $("table :checkbox").attr("checked", false);
                    $("#chooseall").text("全选");
                }
            });
            /////////////////反选//////////////////////////
            $("#Checkbox8").click(function () {
                $("table :checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
            ////////////////删除/////////////////////////////
            $("#Button1").click(function () {
                $("table input:checked").each(function () {
                    $(this).parent().parent().remove();
                })

            });
            ///////////////增加////////////////////
            $("#Button2").click(function () {
                var txt1 = $("#Text1").val();
                var txt2 = $("#Text2").val();
                var txt3 = $("#Text3").val();
                var txt4 = $("#Text4").val();
                var txt5 = $("#Text5").val();
                 var str = '<tr><td><input type="checkbox" /></td><td>' + txt1 + '</td><td>' + txt2 + '</td><td>' + txt3 + '</td><td>' + txt4 + '</td><td>' + txt5 + '</td></tr>';
                $('table').append(str);
            });
        });
    </script>
</head>
<body>
<div>
        <input id="Checkbox7" type="checkbox" /><span id="chooseall">全选</span><input id="Checkbox8"
            type="checkbox" />反选<input id="Button1" type="button" value="删除" /></div>
    <table>
        <tr>
            <td id="tdd">
                操作
            </td>
            <td>
                班级
            </td>
            <td>
                姓名
            </td>
            <td>
                薪水
            </td>
            <td>
                就业单位
            </td>
            <td>
                是否转正
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" />
            </td>
            <td>
                001
            </td>
            <td>
                齐志超
            </td>
            <td>
                4000
            </td>
            <td>
              河软优快云</td>
            <td>
                否</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                002
            </td>
            <td>
                刘晓飞
            </td>
            <td>
                5000
            </td>
            <td>
                大河软</td>
            <td>
                否</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                003
            </td>
            <td>
                张东
            </td>
            <td>
                3333
            </td>
            <td>
                保定学院</td>
            <td>
                是</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" />
            </td>
            <td>
                004
            </td>
            <td>
                小康
            </td>
            <td>
                6677
            </td>
            <td>
                谷歌</td>
            <td>
                否
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" />
            </td>
            <td>
                005
            </td>
            <td>
                小昂</td>
            <td>
                2850
            </td>
            <td>
                百度</td>
            <td>
                是</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox6" type="checkbox" />
            </td>
            <td>
                006
            </td>
            <td>
                王瑞
            </td>
            <td>
                3990
            </td>
            <td>
                IBM</td>
            <td>
                否</td>
        </tr>
    </table>

    <p>班级:<input id="Text1" type="text" />姓名:<input id="Text2" type="text" />薪水:<input
            id="Text3" type="text" /></p>
    <p>就业单位:<input id="Text4" type="text" />是否转正:<input id="Text5" type="text" /></p>
    <p><input id="Button2" type="button" value="增加" /></p>
</body>
</html>