<!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' οnclick='_delete(this)' class='red'>删除</button>";
handle2+="<button type='button' οnclick='_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' οnclick='_delete(this)' class='red'>删除</button>";
handle2+="<button type='button' οnclick='_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>
转载于:https://www.cnblogs.com/predictime/p/7636815.html
相关资源：原生js表单美化制作注册个人信息提交表单.zip
