【代码教程】Js+CSS高亮表格代码+方法html代码

2013-08-19 11:44:14 -0400

[代码教程]Js+CSS高亮表格代码+方法html代码

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

✎请勿抄袭本页面,可以复制框内代码

代码说明如下
代码名：Js+CSS高亮表格代码+方法html代码
类型：html
来自：互联网
代码说明：您可以复制以下框内的代码粘贴到您须要的地方!CSS+JavaScript实现高亮表格功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。!将下方框内代码加入你的网站须要这种功能的地方!

html代码如下框内

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

代码效果演示

高亮的表格

Student List
Student Name	Date of Birth	Class	ID
Joe Bloggs	27/08/1997	Mrs Jones	12009
William Smith	20/07/1997	Mrs Jones	12010
Jane Toad	21/07/1997	Mrs Jones	12030
Amanda Williams	19/03/1997	Mrs Edwards	12021

«Newer Older»

Back to home

Subscribe | Register | Login | N