<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function () { //1.獲取元素 var inps = document.querySelectorAll("input"); var tab = document.querySelector("table"); //獲取原本存在的刪除按鈕 var dels = tab.querySelectorAll("button"); function a(){ this.parentNode.parentNode.remove(); } //給每一個刪除按鈕添加點擊事件 for(var i=0; i<dels.length; i++){ dels[i].onclick = a } //2.點擊 按鈕 獲取input中輸入的內容 追加到table中 inps[3].onclick = function () { var name = inps[0].value; var gender = inps[1].value; var age = inps[2].value; //3.創建 一個 tr var tr = document.createElement("tr"); tr.appendChild(createE("td", tab.tBodies[0].rows.length + 1));//id tr.appendChild(createE("td", name)); tr.appendChild(createE("td", gender)); tr.appendChild(createE("td", age)); tr.appendChild(createE("td","<button>刪除</button>")); //需要給刪除按鈕 添加 點擊事件 刪除一行 var del = tr.querySelector("button"); del.onclick = a //將tr追加到 tbody中 tab.tBodies[0].appendChild(tr); inps[0].value = inps[1].value = inps[2].value = ""; } //封裝一個 創建元素的函數 function createE(tagName, value) {//標簽名 內容 //1.主要代碼 var ele = document.createElement(tagName); ele.innerHTML = value; return ele; } } </script> </head> <body> <input type="text" placeholder="請輸入姓名"> <input type="text" placeholder="請輸入性別"> <input type="text" placeholder="請輸入年齡"> <input type="button" value="添加"> <table width="500" border="1"> <thead> <tr> <td>id</td> <td>姓名</td> <td>性別</td> <td>年齡</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>tom</td> <td>男</td> <td>18</td> <td><button>刪除</button></td> </tr> <tr> <td>2</td> <td>jack</td> <td>男</td> <td>20</td> <td><button>刪除</button></td> </tr> <tr> <td>3</td> <td>rose</td> <td>女</td> <td>18</td> <td><button>刪除</button></td> </tr> </tbody> </table> </body> </html>