<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
changeColor();
}
function addElement(){
var tab=document.getElementById("table");
var new_id=document.createElement("td");
new_id.innerHTML="xh000";
var new_name=document.createElement("td");
new_name.innerHTML="徐小胖";
var new_ope=document.createElement("td");
new_ope.innerHTML="<a href='#' onclick='delElement(this)'>删除</a>";
var new_tr=document.createElement("tr");
new_tr.appendChild(new_id);
new_tr.appendChild(new_name);
new_tr.appendChild(new_ope);
tab.lastChild.appendChild(new_tr);
changeColor();
}
function delElement(obj){
document.getElementById("table").lastChild.removeChild(obj.parentNode.parentNode);
}
function changeColor(){
var this_tr=document.getElementsByTagName("tr");
for(var i=0;i<this_tr.length;i++){
this_tr[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
this_tr[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="delElement(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="delElement(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="addElement()"/> <!--在添加按钮上添加点击事件 -->
</body>
</html>
