标签：el tr 信息 JS var innerHTML 录入 td document
实现简单的信息录入系统：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<style>
tr {
width: 500px;
height: 60px;
}
td,
.input1 {
width: 80px;
height: 60px;
border: 1px solid black;
outline: none;
}
#inputbox {
height: 200px;
width: 250px;
}
.showbox {
width: 500px;
text-align: center;
}
.btn {
background-color: #fff;
border: 1px solid black;
margin-right: 20px;
}
.inp {
outline: none;
}
</style>
<div id="inputbox">
学号：<input class="inp" type="text"><br>
姓名：<input class="inp" type="text"><br>
年龄：<input class="inp" type="text"><br>
爱好：<input class="inp" type="text"><br>
地址：<input class="inp" type="text"><br>
<input type="submit" class="btn"><input type="reset" class="btn">
</div>
<div class="showbox">
<table id="tb" cellpadding="0" cellspacing="0">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>癖好</td>
<td>操作</td>
</tr>
</table>
</div>
<script>
//获取添加按钮的类名
var btn = document.getElementsByClassName('btn');
//重置按钮--清空填入信息
btn[1].onclick = function () {
var info = document.querySelectorAll('.inp');
info.forEach((el) => { el.value = '' })
}
//添加按钮--把内容添加到表格中
btn[0].onclick = function () {
//点击添加一行到showbox:
var tb = document.querySelector('#tb tbody');
var tr = document.createElement('tr');
tb.appendChild(tr);
//获取表单div
var inputbox = document.querySelector('.inputbox');
//点击获取所有的input值
var info = document.querySelectorAll('.inp');
//遍历每个值，创建el个td元素，把td添加到tr中
info.forEach((el) => {
var td = document.createElement('td');
td.innerHTML = el.value;
tr.appendChild(td);
})
//创建最后一个td元素，添加到tr中
var tdlast = document.createElement('td');
tr.appendChild(tdlast);
//创建删除按钮，在网页中命名为删除，把其类名改为delbtn,放入最后一个td中
var delbtn = document.createElement('button');
delbtn.innerHTML = '删除';
delbtn.classList.add('delbtn');
tdlast.appendChild(delbtn);
//点击删除按钮，清空一行
delbtn.onclick = function () {
this.parentNode.parentNode.remove();//button->td->tr
}
//创建设置按钮，在网页中命名为修改，把其类名改为setbtn,放入最后一个td中
var setbtn = document.createElement('button');
setbtn.innerHTML = '修改';
setbtn.classList.add('setbtn');
tdlast.appendChild(setbtn);
//点击修改按钮，对此行可编辑
let flag = true;
setbtn.onclick = function () {
flag = !flag;
if (flag) {
console.log('open');
this.innerHTML = '修改';
//获取当前td的值，并且放到td中
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if (index == tdchange.length - 1) { return }
el.innerHTML = el.children[0].value;
})
} else {
console.log('close');
this.innerHTML = '保存';
//把td的innerHTML替换成input
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if (index != tdchange.length - 1) {
var text = el.innerHTML;
el.innerHTML = "";
var input1 = document.createElement("input");
input1.classList.add('input1');
input1.value = text;
el.appendChild(input1);
}
})
}
}
};
</script>
</body>
</html>
页面效果：
实现功能：
1、增加表单信息
2、修改表达
3、保存修改
4、信息重置
5、删除录入信息
标签：el,tr,信息,JS,var,innerHTML,录入,td,document 来源： https://www.cnblogs.com/LIXI-/p/16482700.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。