javascript进阶篇-9-22-改1@慕课网原创_慕课网

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>excel</title>
<script type="text/javascript">
window.onload=function(){
changeBGC();
}

function addOne(){
    var tr_nodes=document.getElementsByTagName("tr");
    var new_tr = document.createElement("tr");
    for(var i=0;i<2;i++){
    var new_td = document.createElement("td");
    new_td.innerHTML="<input type='text' />";
    new_tr.appendChild(new_td);
    }
    var new_td = document.createElement("td");
    new_td.innerHTML="<a href='javascript:;' onclick='removeTr(this)'>删除</a>";
    new_tr.appendChild(new_td);
    tr_nodes[0].parentNode.appendChild(new_tr);
        changeBGC();
}

function removeTr(obj){

    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}

function changeBGC(){
    var tag_trs = document.getElementsByTagName("tr");
    for(var i=1;i<tag_trs.length;i++){
        tag_trs[i].onmouseover=function(){
            this.style.backgroundColor="#f2f2f2";
        }
        tag_trs[i].onmouseout=function(){
            this.style.backgroundColor="#fff";
        }
    }
}

</script>
</head>

<body>
<table border="1" width="50%" id="table">
<tbody>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>操作</td>
    </tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="removeTr(this)">删除</a></td>
    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="removeTr(this)">删除</a></td>
    </tr>
</tbody>
</table>
<input type="button" value="添加一行" onclick="addOne()"/>
</body>
</html>