You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
4.3 KiB
186 lines
4.3 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Striped Tables
|
|
</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="tables.css" />
|
|
|
|
<style type="text/css">
|
|
|
|
#playlist {
|
|
border: 1px solid #666666;
|
|
}
|
|
|
|
#playlist tbody tr td {
|
|
font-family: "lucida grande", verdana, sans-serif;
|
|
font-size: 8pt;
|
|
padding: 3px 8px;
|
|
border-left: 1px solid #D9D9D9;
|
|
}
|
|
|
|
#playlist tbody tr.selected td {
|
|
background-color: #3d80df;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
border-left: 1px solid #346DBE;
|
|
border-bottom: 1px solid #7DAAEA;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script type="text/javascript">
|
|
<!--
|
|
|
|
|
|
// this function is need to work around
|
|
// a bug in IE related to element attributes
|
|
function hasClass(obj) {
|
|
var result = false;
|
|
if (obj.getAttributeNode("class") != null) {
|
|
result = obj.getAttributeNode("class").value;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function stripe(id) {
|
|
|
|
// the flag we'll use to keep track of
|
|
// whether the current row is odd or even
|
|
var even = false;
|
|
|
|
// if arguments are provided to specify the colours
|
|
// of the even & odd rows, then use the them;
|
|
// otherwise use the following defaults:
|
|
var evenColor = arguments[1] ? arguments[1] : "#fff";
|
|
var oddColor = arguments[2] ? arguments[2] : "#eee";
|
|
|
|
// obtain a reference to the desired table
|
|
// if no such table exists, abort
|
|
var table = document.getElementById(id);
|
|
if (! table) { return; }
|
|
|
|
// by definition, tables can have more than one tbody
|
|
// element, so we'll have to get the list of child
|
|
// <tbody>s
|
|
var tbodies = table.getElementsByTagName("tbody");
|
|
|
|
// and iterate through them...
|
|
for (var h = 0; h < tbodies.length; h++) {
|
|
|
|
// find all the <tr> elements...
|
|
var trs = tbodies[h].getElementsByTagName("tr");
|
|
|
|
// ... and iterate through them
|
|
for (var i = 0; i < trs.length; i++) {
|
|
|
|
// avoid rows that have a class attribute
|
|
// or backgroundColor style
|
|
if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
|
|
|
|
// get all the cells in this row...
|
|
var tds = trs[i].getElementsByTagName("td");
|
|
|
|
// and iterate through them...
|
|
for (var j = 0; j < tds.length; j++) {
|
|
|
|
var mytd = tds[j];
|
|
|
|
// avoid cells that have a class attribute
|
|
// or backgroundColor style
|
|
if (! hasClass(mytd) && ! mytd.style.backgroundColor) {
|
|
|
|
mytd.style.backgroundColor = even ? evenColor : oddColor;
|
|
|
|
}
|
|
}
|
|
}
|
|
// flip from odd to even, or vice-versa
|
|
even = ! even;
|
|
}
|
|
}
|
|
}
|
|
// -->
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body onload="stripe('playlist', '#fff', '#ede');"><a name="top"></a>
|
|
|
|
<div id="bottle">
|
|
|
|
<h1>iTunes Stripes</h1>
|
|
|
|
<table id="playlist" cellspacing="0">
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Lost In The Plot</td>
|
|
<td>The Dears</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Poison</td>
|
|
<td>The Constantines</td>
|
|
</tr>
|
|
<tr class="selected">
|
|
<td>3</td>
|
|
<td>Plea From A Cat Named Virtute</td>
|
|
<td>The Weakerthans</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>Melissa Louise</td>
|
|
<td>Chixdiggit!</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>Living Room</td>
|
|
<td>Tegan And Sara</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>6</td>
|
|
<td>Speed</td>
|
|
<td>Bran Van 3000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>Fast Money Blessing</td>
|
|
<td>King Cobb Steelie</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr class="selected">
|
|
<td>8</td>
|
|
<td>Sore</td>
|
|
<td>Buck 65</td>
|
|
</tr>
|
|
<tr class="selected">
|
|
<td>9</td>
|
|
<td>Love Travel</td>
|
|
<td>Danko Jones</td>
|
|
</tr>
|
|
<tr>
|
|
<td>10</td>
|
|
<td>You Never Let Me Down</td>
|
|
<td>Furnaceface</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<p>
|
|
An example of using JavaScript and the <acronym title="Document Object Model">DOM</acronym> to apply <code>background-color</code> styles to table cells. And because we aren’t applying classes to any of the table rows to achieve the effect, we can use classes for more specific uses, such as indicating selected rows in the table (rows marked #3, #8, and #9).
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|