<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
table {
color: #565;
font: 12px arial;
}
td {
border-bottom: 2px solid #B3DE94;
border-top: 3px solid #FFFFFF;
padding: 9px;
}
tr:hover,
tr.hover{
background-color: #DFC;
color:red;
}
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标指针在行上面的时候
this.className = 'hover';
}
rows[i].onmouseout = function(){ //鼠标指针离开时
this.className = '';
}
}
</script>
</style>
</head>
<body>
<table summary="book list">
<caption>Book List</caption>
<tr >
<td >Title</td>
<td>ID</td>
<td>Contry</td>
<td>Price</td>
<td>Download</td>
</tr>
<tr >
<td >Tom</td>
<td>1213456</td>
<td>Germany</td>
<td>$3.12</td>
<td>Download</td>
</tr>
<tr>
<td >Chance</td>
<td>1213457</td>
<td>Germany</td>
<td>$123.34</td>
<td>Download</td>
</tr>
<tr >
<td >John</td>
<td>Germany</td>
<td>$34.37</td>
<td>Download</td>
</tr>
<tr>
<td>oKathleen</td>
<td>1213459</td>
<td>Germany</td>
<td>$23.67</td>
<td>Download</td>
</tr>
</table>
</html>
扫一扫
3046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
