! DOCTYPE html html lang ="en" head title Table_Simple CSS for HTML tables / title meta charset ="UTF-8" meta name ="viewport" content ="width=device-width, initial-scale=1" style type ="text/css" html { font-family : sans-serif ; -ms-text-
<!DOCTYPE html> <html lang="en"> <head> <title>Table_Simple CSS for HTML tables</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 10px; } table { border-collapse: collapse; border-spacing: 0; } td,th { padding: 0; } .pure-table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } .pure-table caption { color: #000; font: italic 85%/1 arial,sans-serif; padding: 1em 0; text-align: center; } .pure-table td,.pure-table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: .5em 1em; } .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; vertical-align: bottom; } .pure-table td { background-color: transparent; } div.jizhong{ text-align: center; } </style> </head> <body> <div class="jizhong"> <input type="text" id="name">姓名<input type="text" id="age">年龄<input type="text" id="gender">性别 <button id="add">添加</button> </div> <table class="pure-table" id="tb" align="center"> <caption>学生信息表</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>王敬博</td> <td>18</td> <td>男</td> <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td> </tr> <tr> <td>江银涛</td> <td>20</td> <td>女</td> <td><a href="JavaScript:void(0)" onclick="drop(this)">删除</a></td> </tr> </tbody> </table> <script> //1 为添加按钮绑定单击事件 document.getElementById("add").onclick = function(){ //2创建行元素 let tr = document.createElement("tr"); //3创建四个单元格元素 let nameTd = document.createElement("td"); let ageTd = document.createElement("td"); let genderTd = document.createElement("td"); let deleteTd = document.createElement("td"); //4将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(ageTd); tr.appendChild(genderTd); tr.appendChild(deleteTd); //5获取文本框的输入信息 let name = document.getElementById("name").value; let age = document.getElementById("age").value; let gender = document.getElementById("gender").value; //6将文本框信息创建三个文本元素 let nameText = document.createTextNode(name); let ageText = document.createTextNode(age); let genderText = document.createTextNode(gender); //7将三个文本元素添加到td中 nameTd.appendChild(nameText); ageTd.appendChild(ageText); genderTd.appendChild(genderText); //8创建超链接元素和显示的文本及添加href属性 let a = document.createElement("a"); let aText = document.createTextNode("删除"); a.setAttribute("href","JavaScript:void(0)"); a.setAttribute("onclick","drop(this)") a.appendChild(aText); //9将超链接元素添加到td中 deleteTd.appendChild(a); //10获取表格元素，将添加到table中 let table = document.getElementById("tb"); table.appendChild(tr); } function drop(obj){ //1获取table元素 let table = obj.parentElement.parentElement.parentElement; //2获取tr元素 let tr = obj.parentElement.parentElement; //3删除tr table.removeChild(tr); } </script> </body> </html>
添加流程
1 为添加按钮绑定单击事件 2创建行元素 3创建四个单元格元素 4将td添加到tr中 5获取文本框的输入信息 6将文本框信息创建三个文本元素 7将三个文本元素添加到td中 8创建超链接元素和显示的文本及添加href属性 9将超链接元素添加到td中 10获取表格元素，将添加到table中 删除流程 1获取table元素 2获取tr元素 3删除tr