Some basics-蒲公英云

Some basics

傷城~ 2021-09-14 06:38 308阅读 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>