SOURCE

console 命令行工具 X clear

                    
>
console
function delA(){
    var allA = document.getElementsByTagName('a');

    for(var i = 0;i < allA.length;i++){
    
    allA[i].onclick = function(){
        //this
        
        var tr = this.parentNode.parentNode;

        var td = tr.getElementsByTagName('td');
        var name = td[0].innerHTML;
        console.log(name);
        if(confirm('您确认要删除' + name + '?'))
            tr.parentNode.removeChild(tr);
        //阻止a标签的默认事件
        return false;
        }
    }
}

var btn = document.getElementById('btn');
btn.onclick = function(){
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var salary = document.getElementById('salary').value;
    var tr = document.createElement('tr');
    tr.innerHTML = "<td>" + name+ "</td><td>" + email+ "</td><td>" + salary + "</td><td><a href='#'>delete</a></td>";
    var employeeTable = document.getElementById('employeeTable');
    // var tbody = employeeTable.appendChild(tbody);
    employeeTable.appendChild(tr);
    delA();
}
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>删除</th>
    </tr>
    <tr>
        <td>tom</td>
        <td>1399@qq.com</td>
        <td>3000</td>
        <td><a href="#">delete</a></td>
    </tr>
    <tr>
        <td>jack</td>
        <td>1219@qq.com</td>
        <td>3030</td>
        <td><a href="#">delete</a></td>
    </tr>
    <tr>
        <td>siri</td>
        <td>2211@qq.com</td>
        <td>4000</td>
        <td><a href="#">delete</a></td>
    </tr>
</table>
<div id="addcontext">
    <h4>添加员工记录</h3>
    <table>
        <tr>
            <td>name:</td>
            <td><input type="text" id="name" value="name"></td>
        </tr>
        <tr>
            <td>email:</td>
            <td><input type="text" id="email" value="email"></td>
        </tr>
        <tr>
            <td>salary:</td>
            <td><input type="text" id="salary" value="salary"></td>
        </tr>
        <tr><td><input type="submit" value="添加" id="btn"></td></tr>
    </table>
</div>
#employeeTable{
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 10px;
}
#employeeTable table{

}


#addcontext{
    border: 1px solid black;
    padding: 5px;
    margin-top: 10px;
}
input[type=submit]{
    margin-top: 10px;
    margin-left: 100%;
}