信息录入
css样式
<style>
header{
width:600px;
height:auto;
text-align:center;
}
.main{
width:240px;
height:200px;
border:1pxsolid black;
padding:0 30px;
margin:0auto;
}
.main div{
margin-top:5px;
}
.look{
width:700px;
height:500px;
margin:0auto;
}
table{
width:100%;
border:1pxsolid black;
margin-top:20px;
}
tr{
width:100%;
height:30px;
margin:3px;
}
td{
width:80px;
height:100%;
border:1pxsolid black;
}
.input{
width:70px;
height:10px;
border:1pxsolid red;
}
</style>
</head>
<body>
HTML排版
<header>
<divclass="main">
<span>信息录入系统</span>
<div>
<span>学号:</span>
<inputtype="text"id="data">
</div>
<div>
<span>姓名:</span>
<inputtype="text"id="data">
</div>
<div>
<span>年龄:</span>
<inputtype="text"id="data">
</div>
<div>
<span>爱好:</span>
<inputtype="text"id="data">
</div>
<div>
<span>地址:</span>
<inputtype="text"id="data">
</div>
<div>
<buttonid="btn">添加</button>
<buttonid="change">重置</button>
</div>
</div>
<divclass="look">
<table>
<trid="tr">
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>癖好</td>
<td>操作</td>
</tr>
</table>
</div>
</header>
JS代码
<script>
// 重置
varchange=document.querySelector("#change")
change.onclick=function() {
vardata=document.querySelectorAll("#data")
data.forEach(function(el) {
el.value=" "
})
}
// 添加
varbtn=document.querySelector("#btn")
btn.onclick=function() {
vardata=document.querySelectorAll("#data")
vartable=document.querySelector(".look table")
varnewtr=document.createElement("tr")
table.appendChild(newtr)
data.forEach(function(el) {
varnewtd=document.createElement("td")
newtr.appendChild(newtd)
newtd.innerHTML=el.value
})
varlast=document.createElement("td")
newtr.appendChild(last)
last.className="last"
// last.innerHTML="123"
//最后一个单元格添加删除按钮
vardelbtn=document.createElement("button")
delbtn.className="delbtn"
last.appendChild(delbtn)
delbtn.innerHTML="删除"
delbtn.onclick=function() {
delbtn.parentElement.parentElement.remove(newtr)
}
//点击修改按钮后按钮变为确定和修改
varaltbtn=document.createElement("button")
altbtn.className="altbtn"
last.appendChild(altbtn)
altbtn.innerHTML="修改"
letid=1
altbtn.onclick=function() {
id= !id
if(id) {
altbtn.innerHTML="修改"
vartds=this.parentElement.parentElement.children
Array.from(tds).forEach(function(el,index) {
// console.log(el,11111)
console.log(el.children,00000)
//将新输入得值添加到td内
if(index!=el.length-1) {
el.innerHTML=el.children[0].value
//给修改值以后的操作单元格内添加删除和修改按钮
vardelbtn=document.createElement("button")
delbtn.className="delbtn"
last.appendChild(delbtn)
delbtn.innerHTML="删除"
delbtn.onclick=function() {
delbtn.parentElement.parentElement.remove(newtr)
}
varaltbtn=document.createElement("button")
altbtn.className="altbtn"
last.appendChild(altbtn)
altbtn.innerHTML="修改"
}
})
}else{
altbtn.innerHTML="确定"
//给这一行的tr元素中的每个td添加input框，进行值得修改
vartds=this.parentElement.parentElement.children
Array.from(tds).forEach(function(el,index) {
//将td中的值保存起来放入新添加得input框内
if(index!=tds.length-1) {
news=el.innerHTML
el.innerHTML=" "
varinput=document.createElement("input")
input.className="input"
input.value=news
el.appendChild(input)
}
})
}
}
}
</script>