效果图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button onclick="showInfo()">添加</button> <button onclick="getSelectEl()">删除</button> <button onclick="delAll()">删除全部</button> </div> <div id="divInfo"> <p> 姓名：<input id="txtName" type="text" /> </p> <p> 性别：<select id="selSex"> <option>男</option> <option>女</option> <option>未知</option> </select> </p> <p> 年龄：<input id="txtAge" type="text" /> </p> <p> <button id="butOk" onclick="addInfo()">确认添加</button> </p> </div> <div> <table width="400px" border="1px" cellspacing="0"> <thead> <tr> <th><input type="checkbox"/></th> <th>ID</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th></th> </tr> </thead> <tbody id="tab1"></tbody> </table> </div> </body> <script> var tab1 = document.getElementById("tab1"); var code = 1; var row; function showInfo(){ var divInfo = document.getElementById("divInfo"); //判断该层是否显示,显示则隐藏,隐藏则显示 divInfo.style.display = divInfo.style.display=="none"?"block":"none"; // console.log(divInfo.style.display); } function addInfo(){ //得到文本框中的值 var name = document.getElementById("txtName").value; var sex = document.getElementById("selSex").value; var age = document.getElementById("txtAge").value; // console.log(name,sex,age); //创建新元素 var tr = document.createElement("tr"); id = "tr"+code; tr.setAttribute("id",id); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); var td5 = document.createElement("td"); var td6 = document.createElement("td"); //往元素中添加内容 td1.innerHTML = "<input type='checkbox'/>"; td2.innerHTML = code; td3.innerHTML = name; td4.innerHTML = sex; td5.innerHTML = age; td6.innerHTML = "<button οnclick='edit(this.parentNode.parentNode)'>编辑</button><button οnclick='delById(\""+id+"\")'>删除</button>"; //把元素依次添加进去 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tr.appendChild(td6); tab1.appendChild(tr); code++;//id自增 } // 删除信息 function delById(id){ var tr = document.getElementById(id); tab1.removeChild(tr); } //编辑信息,把表格中的信息传递到文本框内 function edit(el){ row = el;//保存要编辑的是哪行 var name = el.childNodes[2].innerHTML; var sex = el.childNodes[3].innerHTML; var age = el.childNodes[4].innerHTML; document.getElementById("txtName").value = name; document.getElementById("selSex").value = sex; document.getElementById("txtAge").value = age; //更改按钮的文字,把按钮调用的方法改为修改的方法 document.getElementById("butOk").innerHTML = "确认修改"; document.getElementById("butOk").setAttribute("onclick","editSave()"); } //确认修改,修改表格中的信息 function editSave(){ var name = document.getElementById("txtName").value; var sex = document.getElementById("selSex").value; var age = document.getElementById("txtAge").value; // console.log(row); row.childNodes[2].innerHTML = name; row.childNodes[3].innerHTML = sex; row.childNodes[4].innerHTML = age; document.getElementById("butOk").innerHTML = "确认添加"; document.getElementById("butOk").setAttribute("onclick","addInfo()"); } //得到复选框勾选的的都有那行,点击上面的删除会把选中的信息依次删除掉 function getSelectEl(){ var cks = Array.from(tab1.getElementsByTagName("input")); cks.forEach(ck=>{ if(ck.checked){ tab1.removeChild(ck.parentNode.parentNode); } }); } //删除所有,直接把表格中的代码变成"",即可达到删除效果 function delAll(){ tab1.innerHTML=""; } </script> </html>