console 命令行工具 X clear

console

var oTable = document.getElementsByTagName('table')[0]

var oForm = document.getElementById('form')
var oName = document.getElementsByName('name')[0]
var oEmail = document.getElementsByName('email')[0]
var oSalary = document.getElementsByName('salary')[0]

oForm.onsubmit = function(e){
  
  if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
  
	var name = oName.value
  var email = oEmail.value
  var salary = oSalary.value
  
  oName.value = ''
  oEmail.value = ''
  oSalary.value = ''
  
  console.log(name)
  
	var tr = document.createElement('tr')
  var td1 = document.createElement('td')
  td1.innerHTML = name

  tr.appendChild(td1)
  var td2 = document.createElement('td')
  td2.innerHTML = email
	tr.appendChild(td2)
  
  var td3 = document.createElement('td')
  td3.innerHTML = salary
  tr.appendChild(td3)
  
  var td4 = document.createElement('td')
  var a = document.createElement('a')
  a.href = '#'
  a.innerHTML = '删除'
  
  a.onclick = function(e){
      if(e.preventDefault){
				e.preventDefault();
			}else{
				window.event.returnValue = false;
			}
    
    	this.parentNode.parentNode.remove()
  }
  
 	td4.appendChild(a)
  tr.appendChild(td4)
  
  
  oTable.appendChild(tr)
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>dom表格增删练习</title>
</head>
<body>
  
  <div class="wrapper">
    <table border="1" cellspacing=0 cellpadding=10>
      <tr>
        <td>Name</td>
        <td>Email</td>
        <td>Salary</td>
        <td><a href="#">操作</a></td>
      <tr>
    </table>
    
    <div class="form">
      <h3>添加新员工</h3>
       <form action="#" id="form">
         <div class="form-group">
            <label for="name">name</label>
            <input type="text" name="name"/>
         </div>
         <div class="form-group">
            <label for="name">email</label>
            <input type="text" name="email"/>
         </div>
          <div class="form-group">
            <label for="name">salary</label>
            <input type="text" name="salary"/>
         </div>
          <div class="form-group">
            <input type="submit" value="添加" />
          </div>
      </form>
    </div>
   
    
  </div>
  
</body>
</html>

.wrapper{
  width:500px;
  height:1000px;
  margin:50px auto;
}

.form{
  padding:30px;
  margin-top:200px;
  border:1px solid #000;
}

.form-group{
  margin:20px 0;
}