<script> var id = document.getElementById('id') var names = document.getElementById('name') var xb = document.getElementById('xb') var tianjia = document.getElementById('tianjia') var tab = document.createElement('table') tianjia.onclick = function () { tab.style.width = "500px" tab.style.height = "50px" tab.border = 1 tab.cellpadding = 0 tab.cellspacing = 0 box.appendChild(tab) var tr = document.createElement('tr') var td1 = document.createElement('td') var td2 = document.createElement('td') var td3 = document.createElement('td') var td4 = document.createElement('td') td1.innerHTML = id.value; td2.innerHTML = names.value; td3.innerHTML = xb.value; td4.innerHTML = "<a href='#' onclick='del(this)'>删除</a>" tr.appendChild(td1) tr.appendChild(td2) tr.appendChild(td3) tr.appendChild(td4) tr.style.textAlign = 'center' tab.appendChild(tr) } function del(e) { var table = e.parentNode.parentNode.parentNode table.removeChild(e.parentNode.parentNode) } </script>
当页面中的按钮被点击时，创建一个包含4列的表格，并将其添加到具有id属性为“box”的元素中。每行包含一个单元格，分别显示用户输入的id、name和xb值，并且在最后一列包含一个带有“删除”链接的超链接。点击该链接将使用del函数删除该行。
del函数的作用是：从表格中删除包含所点击链接的行。在函数中，使用parentNode获取链接的祖先元素，然后使用removeChild方法从表格中删除该行。
<body> <input type="text" placeholder="请输入编号" id="id"> <input type="text" placeholder="请输入姓名" id="name"> <input type="text" placeholder="请输入性别" id="xb"> <input type="button" value="点击" id="tianjia"> <div id="box"> </div> </body>
<style> table { border: 1px solid; margin: auto; width: 500px; } td, th { text-align: center; border: 1px solid; } div { text-align: center; margin: 50px; } </style>
