Js+CSS高亮表格代码+方法

答案：<!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>
<title>高亮的表格</title>
<meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
<style>
p, td, th {
	font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
	border: 1px solid #D6DDE6;
	border-collapse: collapse;
	width: 80%;
}
.datatable td {
	border: 1px solid #D6DDE6;	
	padding: 4px;
}
.datatable th {
	border: 1px solid #828282;
	background-color: #BCBCBC;
	font-weight: bold;
	text-align: left;
	padding-left: 4px;
}
.datatable caption {
	font: bold 0.9em Arial, Helvetica, sans-serif;
	color: #33517A;
	text-align: left;
	padding-top: 3px;
	padding-bottom: 8px;
}
.datatable tr:hover, .datatable tr.hilite {
	background-color: #DFE7F2;
	color: #000000;
}
</style>
</head>
<body>
<table summary="List of new students 2003" class="datatable">
  <caption>Student List</caption>
  <tr>
    <th scope="col">Student Name</th>
    <th scope="col">Date of Birth</th>
    <th scope="col">Class</th>
    <th scope="col">ID</th>
  </tr>
  <tr>
    <td>Joe Bloggs</td>
    <td>27/08/1997</td>
    <td>Mrs Jones</td>
    <td>12009</td>
  </tr>
  <tr>
    <td>William Smith</td>
    <td>20/07/1997</td>
    <td>Mrs Jones</td>
    <td>12010</td>
  </tr>
  <tr>
    <td>Jane Toad</td>
    <td>21/07/1997</td>
    <td>Mrs Jones </td>
    <td>12030</td>
  </tr>
  <tr>
    <td>Amanda Williams</td>
    <td>19/03/1997</td>
    <td>Mrs Edwards</td>
    <td>12021</td>
  </tr>
</table>
<script type="text/javascript">
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
	rows[i].onmouseover = function() {
		this.className += ' hilite';
	}
	rows[i].onmouseout = function() {
		this.className = this.className.replace('hilite', '');
	}
}
</script>
</body>
</html>
上一个：一个挺漂亮的鼠标效果，带跟随效果
下一个：使用JavaScript的FileSystemObject对象写入文本文件内容
更多图片编程知识: