By obtaining the data in the form, dynamically creating the form, adding the data to the form, adding, deleting, modifying and checking the data
style
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 50px auto;
}
.box p {
width: 300px;
height: 40px;
}
.box p input {
width: 200px;
height: 30px;
text-indent: 1em;
outline: none;
}
#btn,
#edit {
width: 100px;
height: 30px;
border: none;
border-radius: 4px;
outline: none;
}
.box p #btn {
margin-left: 62px;
}
#edit {
display: none;
margin-left: 62px;
}
#con {
width: 500px;
color: white;
}
</style>
overall arrangement
<div class="box">
<p><span>用户名</span>：<input type="text" placeholder="请输入用户名" value="" id="username"></p>
<p><span>密   码</span>：<input type="password" placeholder="请输入密码" value="" id='pwd'></p>
<p><button id="btn">提交</button>
<button id="edit">完成</button></p>
<p><span> 操作</span></p>
<div id="con">
</div>
</div>
Rendering effect
js dynamic creation
<script>
//获取inpu框元素，用于输入用户名
var username = document.getElementById("username");
//获取div元素，用于存放table
var con = document.getElementById("con");
//获取input框元素，用于输入密码
var pwd = document.getElementById("pwd");
//获取提交按钮元素，用于提交数据
var btn = document.getElementById("btn");
//获取span元素
var spans = document.getElementsByTagName("span");
//获取编辑按钮元素，用于编辑数据
var edit = document.getElementById("edit");
//定义一个空数组，将sapn中的内容存入作为表头的内容
var arr1 = [];
arr1.push(spans[0].innerText);//用户名
arr1.push(spans[1].innerText);//密码
arr1.push(spans[2].innerText);//操作
spans[2].style.display = 'none';
//创建表格
var table = document.createElement("table");
//设置表格的样式
table.style.borderSpacing = '0px';
table.style.border = '0px';
table.style.backgroundColor = 'darksalmon'
//将div隐藏，在没有数据时隐藏
con.style.display = 'none';
//将创建好的table放入div盒子中
con.appendChild(table);
//创建表头
var thead = document.createElement("thead");
//将表头放入table中
table.appendChild(thead);
//通过循环数组长度创建th的个数
for (var i = 0; i < arr1.length; i++) {
//创建td
var ths = document.createElement("th");
//将td存入thead中
thead.appendChild(ths);
//将数组里对应的数据赋值给td的内容
ths.innerText = arr1[i];
//设置td的样式
ths.style.height = '30px';
ths.style.width = '150px';
}
//提交按钮的点击事件
btn.onclick = function () {
//点击提交时才可将表格显示出来
con.style.display = 'block';
//获取用户名
var u_name = username.value;
//获取密码
var u_pwd = pwd.value;
//判断，只有当用户名和密码都不为空的时候才能向表格里添加数据
if (u_name != '' && u_pwd != '') {
//每点击一次，创建一哥tr
var tr = document.createElement("tr");
//将其加入到table中
table.appendChild(tr);
//为tr添加样式
tr.style.backgroundColor = 'indianred'
//两个单元格，将其加入到tr中
tr.style.textAlign = 'center';
tr.style.lineHeight = '40px';
//创建td用于存放用户名
var td1 = document.createElement("td");
//将td加入tr中
tr.appendChild(td1);
//将获取的用户名存入td中
td1.innerText = u_name;
//创建td用于存放用户密码
var td2 = document.createElement("td");
//将td加入tr中
tr.appendChild(td2);
//将获取的密码存入td中
td2.innerText = u_pwd;
//添加删除，创建一个a标签
var a1 = document.createElement("a");
//将a标签放入tr中
tr.appendChild(a1);
//为a标签添加样式
a1.href = "#";
a1.innerText = '删除';
a1.style.marginRight = '10px';
a1.style.textDecoration = 'none';
//添加编辑，创建一个a标签
var a2 = document.createElement("a");
//将a标签放入tr中
tr.appendChild(a2);
//为a标签添加样式
a2.href = "#";
a2.innerText = '编辑';
a2.style.textDecoration = 'none';
}
//添加完成后将两个输入框的内容清空，便于下一次的添加数据
username.value = '';
pwd.value = '';
//删除数据
//为a标签注册点击事件 0
a1.addEventListener('click', fna);
//触发事件后，删除tr元素
function fna() {
var trs = document.getElementsByTagName("tr");
tr.remove();
//通过判断trs的长度是否为0，若为0说明所有的tr都被删除了，就将表格影藏
if (trs.length == 0) {
con.style.display = 'none';
}
}
//编辑数据
//为a标签注册点击事件
a2.addEventListener('click', fnb);
function fnb() {
//编辑时将提交按钮影藏，编辑按钮显示出来
edit.style.display = 'block';
btn.style.display = 'none';
//从表中获取数据将数据放入input框中显示并修改
username.value = td1.innerText;
pwd.value = td2.innerText;
//为编辑添加点击事件
edit.onclick = function () {
//将编辑后的数据再次放入表格中，完成修改
tr.children[0].innerText = username.value;
tr.children[1].innerText = pwd.value;
//完成后将编辑按钮影藏，提交按钮显示
edit.style.display = 'none';
btn.style.display = 'block';
//将input框的内容清空，便于下一次添加数据
username.value = '';
pwd.value = '';
}
}
}
</script>
Add data and submit. After
submitting, clear the input box and put the data in the form.
Delete data
Before
deleting After deleting
Editing
Click the state when editing, and then the edit button will be displayed.
After editing: Editing Li Si's information
After modifying: The submit button is displayed , The edit button is hidden, and the input box is cleared
