小渣渣学习笔记 python day68【jquery实现模态对话框，并实现表格的增删改】

jquery实现模态对话框，并实现表格的增删改

要引入jquery.js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="jquery-3.5.1.js"></script>  <!--这里要引入jquery文件才能用-->
    <style>
        table, tr, td {
            border: 1px solid purple;
        }
        body {
            z-index: 0;
        }
        .modal {
            width: 300px;
            height: 200px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -100px;
            z-index: 100;
            border-radius: 10px;
            background-color: white;
            border: 1px solid red;
        }
        .hide {
            display: none;
        }
        .cover {
            background-color: rgba(0, 0, 0, 0.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99;
        }
    </style>
    <script>
        $(window).ready(function () {

            //add
            $('input[name=add]').click(function () {//增加按钮事件
                $('.modal,.cover').removeClass('hide'); //把hide类去掉
                $('input[name=user_name]').val(''); //把下面三个文本框清空
                $('input[name=age]').val('');
                $('input[name=hobby]').val('');
            })

            //submit
            $('input:submit').click(function () {
                if ($('input[name=user_name]').prop('disabled') === false) { //判断弹框里的user_name的disabled状态来判断是新增还是修改
                    var td0 = document.createElement('td');//动态创建一堆表格里的东西
                    $(td0).html('<input type="checkbox" disabled>')
                    var td1 = document.createElement('td');
                    $(td1).text($('input[name=user_name]').val());
                    var td2 = document.createElement('td');
                    $(td2).text($('input[name=age]').val());
                    var td3 = document.createElement('td');
                    $(td3).text($('input[name=hobby]').val());
                    var td4 = document.createElement('td');
                    $(td4).html('<input type="button" value="修改" name="edit"><input type="button" value="删除" name="delete">');
                    var tr = document.createElement('tr');
                    $(tr).append(td0); //组装
                    $(tr).append(td1);
                    $(tr).append(td2);
                    $(tr).append(td3);
                    $(tr).append(td4);
                    $('.tr_head').after(tr);
                } else { //修改
                    $(':checked').parent().siblings().eq(1).text($('input[name=age]').val());
                    $(':checked').parent().siblings().eq(2).text($('input[name=hobby]').val());
                }

                $('.modal,.cover').addClass('hide');
                $('input[name=user_name]').prop('disabled', true);
                $(':checked').attr('disabled', true);
                $(':checked').attr('checked', false);
            })

            //cancel
            $('input[name=cancel]').click(function () {
                $('.modal,.cover').addClass('hide');
                $('input[name=user_name]').prop('disabled', false);
                $(':checked').attr('disabled', true);
                $(':checked').attr('checked', false);
            })

            //edit
            $('table').on('click', 'input[name=edit]', function () {
                $('.modal,.cover').removeClass('hide'); //把hide类去掉
                $('input[name=user_name]').prop('disabled', true);

                $(this).parent().siblings().eq(0).children().removeAttr('disabled');
                $(this).parent().siblings().eq(0).children().attr('checked', 'checked');
                $('input[name=user_name]').val($(this).parent().siblings().eq(1).text());
                $('input[name=age]').val($(this).parent().siblings().eq(2).text());
                $('input[name=hobby]').val($(this).parent().siblings().eq(3).text());
            })

            //delete
            $('table').on('click', 'input[name=delete]', (function () {
                if (confirm('确认要删除么？') === true) {
                    $(this).parent().parent().remove();
                }
            }))
        })
    </script>
</head>
<body>


<div class="div1">
    <table>
        <tr class="tr_head">
            <td>#</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>爱好</td>
            <td><input type="button" value="增加" name="add"></td>
        </tr>
        <tr>
            <td><input type="checkbox" disabled></td>
            <td>Tom</td>
            <td>22</td>
            <td>吃饭，睡觉</td>
            <td><input type="button" value="修改" name="edit"> <input type="button" value="删除" name="delete"></td>
        </tr>
        <tr>
            <td><input type="checkbox" disabled></td>
            <td>Jerry</td>
            <td>21</td>
            <td>打游戏</td>
            <td><input type="button" value="修改" name="edit"> <input type="button" value="删除" name="delete"></td>
        </tr>
    </table>
</div>
<div class="cover hide"></div>
<div class="modal hide">
    添加内容：<br>
    姓名：<input type="text" name="user_name"> <br>
    年龄：<input type="text" name="age"> <br>
    爱好：<input type="text" name="hobby"> <br>
    <input type="submit"><input type="button" name="cancel" value="取消">
</div>

</body>
</html>
posted on 2020-12-29 17:01 94小渣渣阅读(78) 评论(0) 收藏举报