2021-01-14

点击事件添加小案例

 <style>
        .table{
            width: 50vw;
            text-align: center;
            border: 1px solid red;
            border-collapse: collapse;
        }
        .table th ,.table td{
            border: 1px solid red;
        }
    </style>

<form >
       <div>
           <label for="">姓名</label>
           <input type="text" id="user">
       </div>

        <div>
            <label for="">年龄</label>
            <input type="text" id="age">
        </div>

        <div>
            <label for="" style="visibility: hidden;">提交</label>
            <input type="button" value="提交"  id="add">
        </div>
   </form>

 <table class="table">
       <thead> 
           <tr>
               <th>姓名</th>
               <th>年龄</th>
           </tr>
       </thead>
       <tbody id="tbody">
           <!-- <tr>
               <td>1</td>
               <td>1</td>
           </tr> -->
       </tbody>
   </table>

<script>
       var data=[
           {"user":"gao","age":19},
           {"user":"wang","age":29},
           {"user":"li","age":39},
       ];

       function showTbody(arr){
            var str="";
            for(var i in arr){
                var {user,age}=arr[i] ;// 解构赋值
                str+=`
                <tr>
                    <td>${user}</td>
                    <td>${age}</td>
                </tr>
                `
            }
            document.getElementById("tbody").innerHTML=str;
       }

        window.onload=function(){
            showTbody(data);
        }

        var addDom= document.getElementById("add");
            addDom.addEventListener("click",function(){
                var user= document.getElementById("user").value;
                var age= document.getElementById("age").value;
                    // data.push({"user":user,"age":age});
                    data.push( {user,age} ); //属性名简写

                    showTbody(data);

            })
   </script>