|
jQuery table effect - hover and background colors |
|
|
|
| Vision |
Exams: $40 max.
LASIK: 15% or 5% off promo rates
Optometry: 5-20% |
| Dental |
10-35% |
| Alternative Care |
20% |
| Wellness |
10-50% |
| Health Supplies |
10-25% |
| Long-Term Care Services |
5-30%
Facilities: 5-15% |
| Hearing |
Lower of 30% off MSRP or $300 off retail (per device) |
| Infertility Treatment |
5-20% |
| Medical Care |
Practitioners: 15-35%
Facilities: 5-20%
Diagnostic Testing 20-60%
Physical therapy/rehab: 15-25% |
| Pharmacy |
20-50% |
| Behavioral Health |
Practitioners 15-35%
Facilities 15-25% |
| NurseLine |
No charge to member |
This is a table to demo the effect by using jQuery to assign the background colors on even and odd rows, and the highlight on mouse over effect. Click read more button to see the scripts and css.
<script type="text/javascript">
$(function() {
$("#tblwellness tr:even").addClass("stripe1");
$("#tblwellness tr:odd").addClass("stripe2");
$("#tblwellness tr").hover(
function() {
$(this).toggleClass("highlight");
},
function() {
$(this).toggleClass("highlight");
}
);
});
</script>
<style type="text/css">
.stripe1 {
background-color:#CCCCb7;
}
.stripe2 {
background-color:#e5e3f4;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style> |
Web Design Blog