2021-01-12

对象解构，赋值

<style>
        .box{
            width: 100vw;
            height: 100vh;
            text-align: center;
        }
        table,th,td{
            text-align: center;
            border: 1px solid gray;
            border-collapse: collapse;
        }
        table{
            margin:0 auto;
            width: 50vw;
            height:10vh;
        }
    </style>

<div class="box">
        <div class="div1">
            <label for="">姓名:</label>
            <input type="text" id="name">
        </div>
        <div class="div4">
            <label for="">性别:</label>
            <input type="text" id="xinbie">
        </div>
        <div class="div2">
            <label for="">年龄:</label>
            <input type="text" id="age">
        </div>
        <div class="div5">
            <label for="">爱好:</label>
            <input type="text" id="aihao">
        </div>
        <div class="div3">
            <label for="" style="visibility: hidden;">提交</label>
            <input type="button" value="提交"  id="adds">
        </div>
        <div class="div4">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>爱好</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>我去</td>
                        <td>女</td>
                        <td>999</td>
                        <td>打篮球</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

<script>
    var arr=[
        {
            // "name":"阿祥",
            // "xinbie":"男",
            // "age":999,
            // "aihao":"打篮球"
        }
    ]
    show()
    function show(){
        var str="";
            for(let i=0;i<arr.length;i++){
                var {name,xinbie,age,aihao}=arr[i]
                str+=`
                <tr>
                    <td>${name}</td>
                    <td>${xinbie}</td>
                    <td>${age}</td>
                    <td>${aihao}</td>
                </tr>
              `
            }
            document.getElementById("tbody").innerHTML=str
        }

        var add=document.getElementById("adds");
        add.onclick=function(){
            var name=document.getElementById("name").value;
            var age=document.getElementById("age").value;
            var xinbie=document.getElementById("xinbie").value;
            var aihao=document.getElementById("aihao").value;
            arr.push({
                name,
                xinbie,
                age,
                aihao
            })
            show()
        }
</script>