<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"/> <title></title> <style> ._body input{ width:250px; height: 25px; border: 1px solid indianred; } ._table{ width: 100%; margin-top: 20px; } tr th,tr td{ border: 1px solid black; text-align: center; } .red{ background: red; color: white; } .blue{ background:blue; color: white; } </style> </head> <body class="_body" style="text-align: center"> <label for="name">姓名<input type="text" id="name"/></label><br/> <label for="sex">性别<input type="text" id="sex"/></label><br/> <label for="age">年龄<input type="text" id="age"/></label><br/> <button type="button" id="submit" class="red">提交</button> <button id="submit_next" type="button" class='blue'>确认提交</button> <table class="_table"> <thead><tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> <th>日期</th> </tr></thead> <tbody id="content"></tbody> </table> <script> function id(idName){ return document.getElementById(idName); } window.onload=function(){ id("submit").onclick=function(){ var tr=document.createElement("tr"); var name=id("name").value; var sex=id("sex").value; var age=id("age").value; //姓名 var name1=document.createElement("td");//节点 var name2=document.createTextNode(name);//文本节点 name1.appendChild(name2); //性别 var sex1=document.createElement("td"); var sex2=document.createTextNode(sex); sex1.appendChild(sex2); //年龄 var age1=document.createElement("td"); var age2=document.createTextNode(age); age1.appendChild(age2); //操作 var handle1=document.createElement("td"); var handle2="<button type='button' onclick='_delete(this)' class='red'>删除</button>"; handle2+="<button type='button' onclick='_compile(this)' class='blue'>编辑</button>"; handle1.innerHTML=handle2; //日期 var day1=document.createElement("td"); var day2=new Date(); day1.innerHTML=day2; tr.appendChild(name1); tr.appendChild(sex1); tr.appendChild(age1); tr.appendChild(handle1); tr.appendChild(day1); id("content").appendChild(tr); id("name").value=id("sex").value=id("age").value=null; } //确认提交 id("submit_next").onclick=function(){ flag.parentNode.previousSibling.previousSibling.previousSibling.innerHTML=id("name").value; flag.parentNode.previousSibling.previousSibling.innerHTML=id("sex").value; flag.parentNode.previousSibling.innerHTML=id("age").value; id("submit").style.display="inline"; id("submit_next").style.display="none"; id("name").value=id("age").value=id("sex").value=null; } } var flag=null; //删除 function _delete(tst){ id("content").removeChild(tst.parentNode.parentNode); id("name").value=id("sex").value=id("age").value=null; } //编辑 function _compile(rst){ flag=rst; id("name").value=rst.parentNode.previousSibling.previousSibling.previousSibling.innerHTML; id("sex").value=rst.parentNode.previousSibling.previousSibling.innerHTML; id("age").value=rst.parentNode.previousSibling.innerHTML; id("submit").style.display="none"; id("submit_next").style.display="inline"; } </script> <script> function id(idName){ return document.getElementById(idName); } window.onload=function(){ id("submit").onclick=function(){ var tr=document.createElement("tr"); var name=id("name").value; var sex=id("sex").value; var age=id("age").value; //姓名 var name1=document.createElement("td");//节点 var name2=document.createTextNode(name);//文本节点 name1.appendChild(name2); //性别 var sex1=document.createElement("td"); var sex2=document.createTextNode(sex); sex1.appendChild(sex2); //年龄 var age1=document.createElement("td"); var age2=document.createTextNode(age); age1.appendChild(age2); //操作 var handle1=document.createElement("td"); var handle2="<button type='button' onclick='_delete(this)' class='red'>删除</button>"; handle2+="<button type='button' onclick='_compile(this)' class='blue'>编辑</button>"; handle1.innerHTML=handle2; //日期 var day1=document.createElement("td"); var day2=document.createTextNode(newDate()); day1.appendChild(day2); tr.appendChild(name1); tr.appendChild(sex1); tr.appendChild(age1); tr.appendChild(handle1); tr.appendChild(day1); id("content").appendChild(tr); id("name").value=id("sex").value=id("age").value=null; } //确认提交 id("submit_next").onclick=function(){ flag.parentNode.previousSibling.previousSibling.previousSibling.innerHTML=id("name").value; flag.parentNode.previousSibling.previousSibling.innerHTML=id("sex").value; flag.parentNode.previousSibling.innerHTML=id("age").value; id("submit").style.display="inline"; id("submit_next").style.display="none"; id("name").value=id("age").value=id("sex").value=null; } } var flag=null; //删除 function _delete(tst){ id("content").removeChild(tst.parentNode.parentNode); id("name").value=id("sex").value=id("age").value=null; } //编辑 function _compile(rst){ flag=rst; id("name").value=rst.parentNode.previousSibling.previousSibling.previousSibling.innerHTML; id("sex").value=rst.parentNode.previousSibling.previousSibling.innerHTML; id("age").value=rst.parentNode.previousSibling.innerHTML; id("submit").style.display="none"; id("submit_next").style.display="inline"; } //时期 function newDate(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds; } </script> </body> </html>