jquery-学生列表增删编辑，纯前端操作

最新推荐文章于 2022-11-01 21:37:25 发布

鲸鱼编程pyhui

最新推荐文章于 2022-11-01 21:37:25 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/ifubing/article/details/99857016

版权

在这里插入图片描述
》编写思路，题目素材

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
            display: none;
        }

        .info{
            position: fixed;
            background-color: white;
            width: 400px;
            height: 300px;
            left:50%;
            top: 50%;
            margin-top:-150px;
            margin-left:-200px;
            display: none;
        }
        form{
            width: 80%;
            height: 40%;
            /*background-color: yellow;*/
            margin: 50px auto 0;

        }
    </style>

<!--    js-->
    <script>

        $(main);

        function main() {
            // 绑定事件，当取消的按钮被点击的时候，有一个函数对应
            $("#btn_cancle").click(dismiss_modal);
            // 绑定事件，当显示按钮被点击的时候，模态框显示
            $("#btn_show").click(show_modal);
            // 绑定事件，当提交按钮点击的时候，新增一行
            $("#btn_tijiao").click(add_line_data);


            // 点击提交添加一行
            function add_line_data() {
                // 数据的处理。。
                // 拿到学生姓名
                // 拿到所学专业
                // 计算下一行的序号
                //
                // 标签的处理，内存中准备。。。
                // tr行标签
                // td序号标签
                // td学生姓名标签
                // td所学专业标签
                // td通用的操作标签
                //
                // 标签的填入操作
                // tr标签的填入。 使用 父标签.append（子标签的方法填入）
                // tr标签append，序号标签   <tr><td>序号</td></tr>
                // tr标签append，学生标签   <tr><td>序号</td> <td>学生姓名</td></tr>
                // tr添加专业标签
                // tr添加操作标签
                //
                // 添加前 table标签是这样的  <table> <tr>第一行</tr></table>
                // table标签append，我们准备好的这个tr标签   <table> <tr>第一行</tr><tr>上面准备好的tr</tr> </table>
            }

            // 让模态框出现
            function show_modal() {
                $(".modal").css("display","block");
                $(".info").css("display", "block");
            }


            //让模态框消失
            function dismiss_modal() {
                // 目标，点击取消，让模态框消失
                // 拿到标签对象
                var $divInfo = $(".info");
                // 操作标签对象的属性，设置css的display为none
                $divInfo.css("display","none");
                $(".modal").css("display","none");
            }
        }



    </script>
</head>
<body>

<input type="button" value="添加学生" id="btn_show">

<!--遮罩层-->
<div class="modal">1</div>

<!--信息层-->
<div class="info">
<!--    表单-->
    <form action="">
        姓名：<input type="text" name="username"> <br>
        <select name="subject" id="">
            <option value="1">python</option>
            <option value="2">php</option>
            <option value="3">go</option>
            <option value="4">java</option>
        </select>
        <br>


        <input type="button" value="提交" id="btn_tijiao">
        <input type="button" value="取消" id="btn_cancle">
    </form>
</div>

<h1>学生列表</h1>
<table border="1">
<tr>
    <td>序号</td>
    <td>学生姓名</td>
    <td>所选专业</td>
    <td>操作</td>
</tr>

<tr>
    <td>1</td>
    <td>张三</td>
    <td>python</td>
    <td>编辑|删除</td>
</tr>


</table>
</body>
</html>

积极思考，尽量独力完成