JS+CSS实现表格高亮的方法

本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下：

这里使用Javascript+CSS实现表格高亮的功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。

运行效果如下图所示：

具体代码如下：

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;
}




 
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
 

希望本文所述对大家的javascript程序设计有所帮助。