通过获取表单里的数据，动态创建表格，将数据添加到表格中，对数据进行增删改查
样式
<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>
整体布局
<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>
呈现效果
js动态创建
<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>
添加数据并提交
提交后，清空输入框，将数据放入表格中
删除数据
删除前
删除后
编辑
点击编辑时状态，此时edit按钮才显示出来
编辑后：编辑李四的信息
修改后：提交按钮显示，编辑按钮隐藏，清空输入框
