Jquery實現頁面的新增、刪除、全選、取消全選、漸變色

Devil_Mao發表於2020-11-05
jQuery

文章目錄

整體程式碼

<!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>

點選這裡檢視效果

總結

提示：這裡對文章進行總結：
本文主要介紹了Jquery實現頁面的新增、刪除、全選、取消全選、漸變色等頁面操作

相關文章