Some basics

傷城~ 2021-09-14 06:38 167阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            form{
                text-align: center;
            }
            table{
                text-align: center;
                margin:20px auto;
    
            }
            td{
                width:200px;
                height:30px;
            }
            tr{
                display:block;
                border-top:1px solid gray;
            }
            .submit{
                width:100px;
                height:30px;
                display: inline-block;
                margin:10px;
            }
            .qedit{
                display: none;
                width:100px;
                height:30px;
                margin:10px;
            }
        </style>
    </head>
    <body style="text-align: center;">
    <form action="">
        <div><span>姓名:</span><input class="name" type="text"></div>
        <div><span>年龄:</span><input class="age" type="text"></div>
        <div><span>性别:</span><input class="sex" type="text"></div>
        <button type="button" class="submit">提交</button>
        <button type="button" class="qedit">确认编辑</button>
    </form>
    
    <table class="table">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>编辑</td>
        </tr>
    </table>
    
    </body>
    <script src="jquery/jquery.js"></script>
    <script>
        $(function(){
            $('.submit').on('click',function () {
                var n=$('.name').val();
                var a=$('.age').val();
                var s=$('.sex').val();
                var str='';
                str+='<tr>';
                str+='<td>'+n+'</td>';
                str+='<td>'+a+'</td>';
                str+='<td>'+s+'</td>';
                str+='<td><button type="button" class="edit">编辑</button><button type="button" class="del">删除</button></td>';
                str+='</tr>';
                $('.table').append(str);
                $('.name').val('');
                $('.age').val('');
                $('.sex').val('');
            });
            $('.table').on('click','.del',function () {
                $(this).parent().parent().hide();
    
            });
            var obj=null;
            $('.table').on('click','.edit',function () {
                obj=$(this);
                var s=$(this).parent().prev().text();
                var a=$(this).parent().prev().prev().text();
                var n=$(this).parent().prev().prev().prev().text();
                $('.name').val(n);
                $('.age').val(a);
                $('.sex').val(s);
                $('.submit').hide();
                $('.qedit').show();
            });
            $('.qedit').on('click',function () {
                var n=$('.name').val();
                var a=$('.age').val();
                var s=$('.sex').val();
                obj.parent().prev().text(s);
                obj.parent().prev().prev().text(a);
                obj.parent().prev().prev().prev().text(n);
                $('.submit').show();
                $('.qedit').hide();
                $('.name').val('');
                $('.age').val('');
                $('.sex').val('');
            })
        });
    </script>
    </html>