jQuery 页面新增与删除

最新推荐文章于 2023-05-13 08:35:38 发布

Rookie_Chicken

最新推荐文章于 2023-05-13 08:35:38 发布

阅读量238

点赞数

文章标签： html js jquery javascript css

本文链接：https://blog.csdn.net/Xiaobai_0106/article/details/109481134

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        tr, th, table, td {
            border: 1px solid pink;

        }

        a {
            display: inline-block;
            font-size: 14px;
            width: 40px;
            margin: 2px;
            text-align: center;
            height: 22px;
            line-height: 22px;
            background-color: #EFEFEF;
        }

        .first {
            background-color: #ffa275;
            width: 40%;
            height: auto;
            position: absolute;
            left: 35%;
        }

        table {
            text-align: center;
            width: auto;
            height: auto;
        }

        .bgc {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: gray;
            opacity: 0.5;
            display: none;
        }

        .newData {
            position: absolute;
            width: 50%;
            height: auto;
            background-color: #9F6;
            margin: 0 auto;
            left: 25%;
            top: 30%;
            display: none;
        }


        .title {
            width: 50%;
            height: 30px;
            margin: 0 auto;
            background-color: #0F6;
        }

        .middle {
            text-align: center;
            width: 50%;
            height: auto;
            margin: 0 auto;
            background-color: pink;
        }

        .bottom {
            width: 50%;

            text-align: center;
            height: auto;
            background-color: blue;
            margin: 0 auto;
        }

        #span1 {

            float: left;
         

            padding-left: 15px;
        }

        #span2 {

            float: right;
            /* 鼠标放的样式*/
            cursor: pointer;
            padding-right: 5px;
        }

    </style>
    <script>
        $(function () {
            // dom节点加载完自动执行
            $("tr:odd").css("background-color", "yellow");
            // 设置方法       a:nth-child(2)--第二个a标签
            $("tbody").on("click", "tr td a:nth-child(2)", function () {
                if (confirm("确定删除?")) {
                    $("tr:odd").css("background-color", " #ffa275");
                    $(this).parents("tr").remove();
                    $("tr:odd").css("background-color", "yellow");
                }
                if ($("tbody").tr.length === 1) {
                    $("tbody").remove();
                }
            });

// 全选框     thead tr th  input:checkbox  获取thead 标签里面 tr 里面的 th 里面的  input里面的 复选框
            $("thead tr th  input:checkbox").click(function () {
                // 判断是否被选中       $(this).prop("checked") 返回类型是true或 false
                if ($(this).prop("checked")) {
                    if (confirm("确定全选?"))
                        $("tbody input:checkbox").prop("checked", true);
                } else {
                    $("tbody input:checkbox").prop("checked", false);
                }
            });

            //点击新增 页面出来
            $("#button1").click(function () {
                $(".bgc").show();
                $(".newData").show();
            });

            // 点击X  页面隐藏
            $("#span2").click(function () {
                $(".bgc").hide();
                $(".newData").hide();
            });

            $("#button2").click(function () {
                // 获取参数
                var name = $("#name").val();
                var subject = $("#subject").val();
                var goal = $("#goal").val();
                console.log(name);
                if(name==""){
                    alert("名字不能为空");
                    return  ;
                }
                $("tbody").append("<tr>" +
                    "<td><input type='checkbox'></td>" +
                    "<td>" + name + "</td>" +
                    "<td>" + subject + "</td>" +
                    "<td>" + goal + "</td>" +
                    "<td><a>修改</a><a>删除</a></td>" +
                    "</tr>");


                $(".bgc").hide();
                $(".newData").hide();
                $("tr:odd").css("background-color", "yellow");
            });

        });

    </script>
</head>
<body>

<div class="first">
    <button id="button1">新增</button>
    <div class="content">
        <table>
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>名字</th>
                <th>科目</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>李小华</td>
                <td>数学</td>
                <td>100</td>
                <td><a>修改</a><a>删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>李中华</td>
                <td>数学</td>
                <td>72</td>
                <td><a>修改</a><a>删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>李大华</td>
                <td>数学</td>
                <td>60</td>
                <td><a>修改</a><a>删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="bgc">

</div>
<div class="newData">
    <div class="title">
        <span id="span1">添加标题</span>
        <span id="span2">X</span>
    </div>


    <div class="middle">
        请填写名字：<input type="text" id="name">
        <br><br>
        请填写科目：<input type="text" id="subject">
        <br><br>
        请填写分数：<input type="text" id="goal">
        <br><br>
    </div>


    <div class="bottom">
        <button id="button2">提交</button>
    </div>

</div>
</body>
</html>

Rookie_Chicken

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery 页面新增与删除

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> <style> table, th, td { border: 1px solid
复制链接

扫一扫