您的位置：首页 > Web前端 > JavaScript

[javaScript]改变鼠标经过表格行背景色

2016-01-16 14:24 701 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航