Jquery实现页面的新增、删除、全选、取消全选、渐变色

最新推荐文章于 2022-12-28 19:58:46 发布

搬砖养猫咪

最新推荐文章于 2022-12-28 19:58:46 发布

阅读量406

点赞数

分类专栏： Jquery学习内容文章标签： java jquery html html5

本文链接：https://blog.csdn.net/Devil_Mao/article/details/109501605

版权

Jquery学习内容专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

整体代码
总结

整体代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list {
            float: left;
        }

        table, tr, td {
            width: 800px;
            height: 80px;
            border: 1px solid #000;
            text-align: center;
        }

        .odd {
            background-color: aqua;
        }

        .insert {
            float: right;
            display: none;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //渐变色
            $("tr:odd").addClass("odd");
            //全选
            $(".checkAll:checkbox").click(function () {
                if ($(this).prop("checked")) {
                    $(".choose:checkbox").prop("checked", true);
                    $("td>span").replaceWith("<span>全选</span>");
                } else {
                    $(".choose:checkbox").prop("checked", false);
                    $("td>span").replaceWith("<span>取消全选</span>");
                }
            });
            //添加
            $(".add").click(function () {
                //弹出新增页面
                $(".insert").css("display", "block");
            });
            //获取值
            var ipt1 = $("form>input:eq(0)").val();
            var ipt2 = $("form>input:eq(1)").val();
            var ipt3 = $("form>input:eq(2)").val();
            var ipt4 = $("form>input:eq(3)").val();
            var ipt5 = $("form>input:eq(4)").val();
            var ipt6 = $("form>input:eq(5)").val();
            $("form input:button").click(function () {
                //内部插入
                $("table").append("<tr>\n" +
                    "            <td><input type=\"checkbox\" class=\"choose\"></td>\n" +
                    "            <td>1</td>\n" +
                    "            <td>" + ipt1 + "</td>\n" +
                    "            <td>" + ipt2 + "</td>\n" +
                    "            <td>" + ipt3 + "</td>\n" +
                    "            <td>" + ipt4 + "</td>\n" +
                    "            <td>" + ipt5 + "</td>\n" +
                    "            <td>" + ipt6 + "</td>\n" +
                    "            <td><input type=\"button\" value=\"修改\"><input type=\"button\" value=\"删除\"></td>\n" +
                    "        </tr>");
                //渐变色
                $("tr:odd").addClass("odd");
                //隐藏新增页面
                $(".insert").hide();
            });
            //删除
            $("table").on("click", "tr td input:last-child", function () {
                //渐变色
                $("tr:odd").removeClass("odd");
                if (confirm("是否删除！")) {
                    $(this).parent().parent().remove();
                }
                //渐变色
                $("tr:odd").addClass("odd");
            });
        });
    </script>
</head>
<body>

</body>
<div class="list">
    <table cellspacing="0">
        <input type="button" value="添加" class="add">
        <tr>
            <td><input type="checkbox" class="checkAll"><span></span></td>
            <td>编号</td>
            <td>用户名</td>
            <td>密码</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机号</td>
            <td>地址</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose"></td>
            <td>1</td>
            <td>zhangsan</td>
            <td>123456</td>
            <td>男</td>
            <td>18</td>
            <td>1212212</td>
            <td>河南郑州</td>
            <td><input type="button" value="修改"><input type="button" value="删除"></td>
        </tr>
    </table>
</div>

<div class="insert">
    <form>
        用 户 名：<input type="text"><label>不能为空且长度在6-18之间</label><br>
        密 码：<input type="text"><label>只能是数字和字母且长度在8-16之间</label><br>
        确认密码：<input type="text"><label>必须和密码一样</label><br>
        性 别：<input type="radio" name="m">女<input type="radio" name="m">男<br>
        年 龄：<input type="text"><label>必须是数字</label><br>
        手 机 号：<input type="text"><label>必须是数字并且是1开头的</label><br>
        地 址：<input type="text"><label>不能为空</label><br>
        <input type="button" value="确认">
    </form>
</div>
</html>