Zebra stripping not working in IE8

Question

I wrote the following jquery to apply zebra stripping to a certain row in a table. This works fine in Chrome and Firefox but doesnt work in IE8. W

<script>
$(document).ready(function()
{
$("tr.alt:even").css("background-color", "#f0f8ff");
$("tr.alt:odd").css("background-color", "#fcfceb");
});
</script>

Here is the HTML

<tr class="alt">
    <td class="status"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status></td>
    <td class>Received</td>
</tr>
<tr class="alt">
    <td class="status></td>
    <td class>Received</td>
</tr>

Can I suggest doing this in just pure CSS? With maybe a polyfill for the older IE browsers? — ahren, Nov 26 '12 at 00:56
How would i do this with CSS...?? I do not know how many rows i'll be getting from the database — John, Nov 26 '12 at 01:04
pretty similar to js... `tr.alt:nth-child(odd){background:red;}` - you will need to polyfill for IE8 and below though. — ahren, Nov 26 '12 at 01:06
Your code should work. Make sure that the surrounding html is valid. — Kevin B, Nov 26 '12 at 01:25

Roko C. Buljan · Answer 1 · 2012-11-26T01:00:26.797

(tested in IE 7,8...) Fix your markup and it will work flawlessly: class="status <- missing "
<td class> = invalid attr

<table>
<tr class="alt">
    <td class="status"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td>Received</td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td>Received</td>
</tr>
</table>

Or it should be:

<table>
<tr class="alt">
    <td class="status"></td>
    <td class="Received"></td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class="Received"></td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class="Received"></td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class="Received"></td>
</tr>
<tr class="alt">
    <td class="status"></td>
    <td class="Received"></td>
</tr>
</table>

I don't know, both works, pick your choice

Do i need to have a certain security level or something on my browser — John, Nov 26 '12 at 01:07
No. http://webdesign.about.com/od/css3/qt/alternating-row-styles-tables.htm check this article on how to do it with pure CSS — Roko C. Buljan, Nov 26 '12 at 01:08
@roXon *"not working in IE8"* do those css3 selectors work in IE8? using css3 would have the same problem that he currently has. — Kevin B, Nov 26 '12 at 01:23

score 0 · Accepted Answer · answered Nov 27 '12 at 04:49

<style type="text/css">
  tr.odd 
{
    background:fcfceb;
}   
  tr.even 
{
    background:f0f8ff;
}
tr.zero 
{
    background-color:#FFE4E1;
}
</style>

<script>
  jQuery(function($) {
    $("tr.alternateColor:odd").addClass("odd");
    $("tr.alternateColor:even").addClass("even");
</script>

Finally got it to run. I was having issues with my CSS in IE

Zebra stripping not working in IE8

2 Answers2