With CSS and modern browsers, it is easy to shade the colors of alternating rows.
For example:
tr:nth-child(odd) {background-color:#ffd;}
IE8 does not understand nth-child, so we assign classnames to alternate rows and target those classnames with the bg-color.
However, maintaining classnames is not very convenient if the rows change frequently.
I would like to find out if JavaScript could assign classnames to alternate rows when IE8 is detected.
This post was spurred by a request in the CSS forum. I don’t know if the poster is interested in JS or not, but I would like to have this in my “toolbox” for the benefit of those who “never say die.”
Fair confession: I do not speak JavaScript so this is a “will someone please do this for me” request. With luck, and depending on how clearly it’s explained, I’ll pick up a byte of JS knowledge in the process. Fingers crossed
NOTE: the classname .altie8 could be an ID if necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Color Alt Rows - IE8</title>
<!--
The goal is for JavaScript to allow targeted rows to be assigned a background-color when IE8 is detected.
This demo expects alternate rows (odd or even) to be colored.
A thought... by assigning the parent container a particular class (like altie8 in this example), perhaps the script could work with HTML tableware, divs and list items (however the rows were built).
The display would need to refresh when a row was added or deleted.
-->
<style type="text/css">
table {
border:1px solid #aaa;
border-spacing:0;
margin:0 auto;
}
td {
border-left:1px dotted #ccc;
border-top:1px solid #aaa;
width:100px; /* TEMP for TESTING */
height:12px; /* TEMP for TESTING */
padding:8px;
}
tr:first-child td {border-top:0;}
td:first-child {border-left:0;}
tr:nth-child(odd) {background-color:#ffd;} /* might want to comment this line out when testing JS */
</style>
<!-- Locate at bottom of page? Might want to remove IE8 restriction while testing JS. -->
<!--[if IE 8]>
<script type="Javascript">
there is no js at this time
</script>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
.altie8 .alt {background-color:#ffd;}
</style>
<![endif]-->
</head>
<body>
<table>
<tbody class="altie8">
<tr class="alt"> <!-- I would propose that these classes are not normally present in the HTML and should be added to odd or even rows by JS when IE8 is detected -->
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>