javascript 第一次学到的dom(文件)增删，自学的话大概流程就是先会css+html 制作一个实验图效果如图所示
即点击删除（javascript操作了）就是删除信息，点击submite就是提交信息到上面表格里面，首先就是单击绑定函数（这个是基本，要掌握）。其次就是操作了。创建元素document.createElement,什么get获取元素啊这些，这些都是可以通过百度查文档得到的。注意我里面有些return false 这是关键哦，取消连接，取消跳转这些。不然可能会闪窗，失效哦。
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
table{
margin: 100px auto;
/* border: 1px solid ; */
text-align: center;
}
form{
width: 500px;
height: 250px;
border: 1px solid red;
margin: 100px auto;
text-align: center;
}
form input{
width: 200px;
}
</style>
<script>
function Dela() {
//点击超链接，点那删哪；
//这里点击谁，this 就是谁
//我们要删 tr 所以先找tr，然后利用他的父亲.removeChild 把自己删了
var tr = this.parentNode.parentNode;
//删除前弹提示框；
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("确定删除"+name+"吗？");
//confirm （）用于弹出一个确认或者取消的提示框
if(flag==true)
{
tr.parentNode.removeChild(tr);
}
return false;//取消连接的的跳转
}
window.onload = function(){
/*
点击超链接删除
*/
var Alla = document.getElementsByTagName("a");
//绑定超链接
for(var i=0; i<Alla.length; i++)
{
Alla[i].onclick = Dela;
}
var addbtn = document.getElementById("addbtn");
addbtn.onclick = function(){
//获取员工的名字
var name = document.getElementById("name").value;
//就是某某.value
var emile = document.getElementById("emile").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+emile+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href = '#' >Delete</a></td>";
var employ = document.getElementById("employ");
var tbody = employ.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
var a = tr.getElementsByTagName("a")[0];//把刚刚添加的啊获取出来
a.onclick = Dela;
return false;//这个是取消表单的跳转 ，不然加不上去
}
}
</script>
</head>
<body>
<table id="employ" border="1" cellspacing = "0" >
<thead>
<tr>
<th>name</th>
<th>emile</th>
<th>salary</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>tom163784368</td>
<td>6777</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Uom</td>
<td>dsff432368</td>
<td>3442</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>GGdjdhh</td>
<td>trye7r6448</td>
<td>9977</td>
<td><a href="#">Delete</a></td>
</tr>
</tbody>
</table>
<form action="" >
<h3>添加新员工</h3>
<br><br>
name: <input type="text" placeholder="name" id = "name">
<br>
<br>
emile: <input type="text" placeholder="emile" id="emile">
<br>
<br>
salary: <input type="text" placeholder="salary" id="salary">
<br>
<br>
<button id="addbtn"> Submite</button>
</form>
</body>
</html>
这里面弹窗确认就是用了confirm函数的哦。这样使得人机交互更好的哦。