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

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

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

运行效果如下图所示：

具体代码如下：

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

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程序设计有所帮助。

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南