Toggle Strips : Table « jQuery « JavaScript DHTML
- JavaScript DHTML
- jQuery
- Table
Toggle Strips
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table tr:nth-child(even)").addClass("striped");
});
function swap() {
$('tr').toggleClass('striped');
}
</script>
<style>
body,td {
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: coral;
}
td {
padding: 1px 8px;
}
</style>
</head>
<body>
<body>
<table onmouseover="swap()" onmouseout="swap()">
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Addf</td>
</tr>
</table>
</body>
</html>
Related examples in the same category