輸入信息，點擊添加自動添加到表格 ``` <style> table, tr, th, td { border: 1px solid #ccc; } tr { height: 40px; } table { border-collapse: collapse; width: 630px; text-align: center; margin: 20px auto; } thead { background-color: yellowgreen; } fieldset { width: 600px; margin: 0 auto; } input { height: 20px; } </style> <div id="app"> <!-- 第一部分：輸入信息 --> <fieldset> <legend>學生錄入系統</legend> <p> <span>姓名：</span> <input type="text" name="username" class="username"> </p> <p> <span>年齡：</span> <input type="text" name="age" class="age"> </p> <p> <span>性別：</span> <select name="sex" id="sex"> <option value="男">男</option> <option value="女">女</option> </select> </p> <p> <span>手機：</span> <input type="text" name="phone" class="phone"> </p> <p> <button id="but">確認提交</button> </p> </fieldset> <!-- 第二部分：信息展示 --> <table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>手機</th> <th>刪除</th> </tr> </thead> <tbody class="tbody"> <!-- <tr> <td>張三</td> <td>18</td> <td>男</td> <td>15511111111</td> <td>刪除</td> </tr> --> </tbody> </table> </div> <script> // 邏輯：1.添加信息并展示 2.刪除操作 // 先把數據push到一個數組當中，然后對數組進行遍歷（對tr的循環，拼接之后，賦值給tbody的innerHTML） let sex = document.getElementById('sex'); let but = document.getElementById('but'); let input = document.getElementsByTagName('input'); let tbody = document.getElementsByTagName('tbody')[0]; // 模擬一個數據 // let stus = [{name:"李四",age:19,sex:"男",phone:15512344321}]; let stus = []; // 1.提交 拼接一個對象，作為數組的元素 but.onclick = function () { let obj = { name: input[0].value, age: input[1].value, sex: sex.value, phone: input[2].value }; stus.push(obj); console.log(stus); // 2.對數組進行遍歷 let tr = ''; stus.forEach((item, index) => { tr += "<tr class='newTr'>" + "<td>"+item.name+"</td>" + "<td>"+item.age+"</td>" + "<td>"+item.sex+"</td>" + "<td>"+item.phone+"</td>" + "<td onclick='del("+index+")'>刪除</td>" + "</tr>"; }); tbody.innerHTML = tr; } // 3.刪除操作 function del(index){ // 3.1 刪除數組中的這條信息 stus.splice(index,1); // 3.2 刪除DOM元素 // tbody.removeChild(該條信息的tr); let res = document.getElementsByClassName('newTr')[index]; tbody.removeChild(res); } </script> ``` 效果圖：