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