<!DOCTYPE html>
<html>
<head>
<title>Striped Tables</title>
<link rel="stylesheet" href="script05.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="jquery/jquery.tablesorter.js"></script>
<script src="script05.js"></script>
</head>
<body>
<h1>Beatles Discography</h1>
<table id="theTable">
<thead>
<tr>
<th>Album</th><th>Year</th><th>Label</th>
</tr>
</thead>
<tr>
<td>Please Please Me</td><td>1963</td><td>Parlophone</td>
</tr>
<tr>
<td>With The Beatles</td><td>1963</td><td>Parlophone</td>
</tr>
<tr>
<td>A Hard Day's Night</td><td>1964</td><td>Parlophone</td>
</tr>
<tr>
<td>Beatles for Sale</td><td>1964</td><td>Parlophone</td>
</tr>
<tr>
<td>Help!</td><td>1965</td><td>Parlophone</td>
</tr>
<tr>
<td>Rubber Soul</td><td>1965</td><td>Parlophone</td>
</tr>
<tr>
<td>Revolver</td><td>1966</td><td>Parlophone</td>
</tr>
<tr>
<td>Sgt. Pepper's Lonely Hearts Club Band</td>
<td>1967</td><td>Parlophone</td>
</tr>
<tr>
<td>Magical Mystery Tour</td><td>1967</td><td>Capitol</td>
</tr>
<tr>
<td>The Beatles</td><td>1968</td><td>Apple</td>
</tr>
<tr>
<td>Yellow Submarine</td><td>1969</td><td>Apple</td>
</tr>
<tr>
<td>Abbey Road</td><td>1969</td><td>Apple</td>
</tr>
<tr>
<td>Let It Be</td><td>1970</td><td>Apple</td>
</tr>
</table>
</body>
</html>
table {
border-collapse: collapse;
}
tr.even {
background-color: #C2C8D4;
}
tr.over {
background-color: #8797B7;
}
td {
border-bottom: 1px solid #C2C8D4;
padding: 5px;
}
th {
border-right: 2px solid #FFF;
color: #FFF;
padding-right: 40px;
padding-left: 20px;
background-color: #626975;
}
th.sortUp {
background: #626975 url(jquery/images/asc.png) no-repeat right center;
}
th.sortDown {
background: #626975 url(jquery/images/desc.png) no-repeat right center;
}
$(document).ready(function() {
$("tr").mouseover(function() {
$(this).addClass("over");
});
$("tr").mouseout(function() {
$(this).removeClass("over");
});
$("#theTable").tablesorter({
sortList:[[1,0]],
cssAsc: "sortUp",
cssDesc: "sortDown",
widgets: ["zebra"]
});
});
sortlist:[column,direction]
Direction 0=up & 1=down
Using the tablesorter jquery function
Using a plugin