Hi, this is my first post on the jQuery Google group. I have been
using the Prototype Javascript library and am now trying to learn to
use the jQuery Javascript library. For my first attempt at using
jQuery, I have been trying to stripe visible table rows and found that
jQuery does this incorrectly or poorly.
Here is the css and html:
<style type="text/css">
tbody { background-color: #F6F6F6; }
tr.rowodd { background-color: #FFF; }
tr.roweven { background-color: #F2F2F2; }
.remove { display:none; }
</style>
<table id="foobar">
<thead>
<tr><td>int</td><td>month_fulltxt</td><td>month_shrttxt</
td><td>month_fullnum</td><td>month_shrtnum</td></tr>
</thead>
<tfoot>
<tr><td>int</td><td>month_fulltxt</td><td>month_shrttxt</
td><td>month_fullnum</td><td>month_shrtnum</td></tr>
</tfoot>
<tbody>
<tr class="remove"><td>1</td><td>January</td><td>Jan</td><td>01</
td><td>1</td></tr>
<tr style="display:none;"><td>2</td><td>February</td><td>Feb</
td><td>02</td><td>2</td></tr>
<tr><td>3</td><td>March</td><td>Mar</td><td>03</td><td>3</td></tr>
<tr><td>4</td><td>April</td><td>Apr</td><td>04</td><td>4</td></tr>
<tr><td>5</td><td>May</td><td>May</td><td>05</td><td>5</td></tr>
<tr><td>6</td><td>June</td><td>Jun</td><td>04</td><td>4</td></tr>
<tr><td>7</td><td>July</td><td>Jul</td><td>07</td><td>7</td></tr>
<tr><td>8</td><td>August</td><td>Aug</td><td>08</td><td>8</td></tr>
<tr><td>9</td><td>September</td><td>Sep</td><td>09</td><td>9</td></tr>
<tr><td>10</td><td>October</td><td>Oct</td><td>10</td><td>10</td></tr>
<tr><td>11</td><td>November</td><td>Nov</td><td>11</td><td>11</td></
tr>
<tr><td>12</td><td>December</td><td>Dec</td><td>12</td><td>12</td></
tr>
</tbody>
</table>
And here is the first Javascript utilizing jQuery:
<script type="text/javascript">
$(document).ready(function(){
$('#foobar tbody tr:visible:even').addClass('roweven');
$('#foobar tbody tr:visible:odd').addClass('rowodd');
});
</script>
The problem is that jQuery assigns a class of 'roweven' to odd
numbered <tr> elements and a class of 'rowodd' to even numbered <tr>
elements across all browsers. I've tested this on jQuery 1.3.2 and
jQuery 1.3.1.
So I tried to do this a different way and here is the second
Javascript utilizing jQuery:
<script type="text/javascript">
$(document).ready(function() {
var j = 0;
var rows = $('#foobar tbody tr:visible');
for (i = 0; i < rows.length; i++){
j++;
if (j % 2 == 0) {
rows[i].className = 'roweven';
}
else {
rows[i].className = 'rowodd';
}
}
});
</script>
Although this works in FF, Chrome, Opera and Safari, the problem is
that it does not work in IE8 (and most likely other IE versions) when
I use jQuery 1.3.2. It does work in all browsers including IE8 if I
use jQuery 1.3.1. The problem in IE8 is that jQuery 1.3.2 does not
hide the <tr class="remove"> element even though it has a css rule of
{display:none;}. It does, however, hide <tr style="display:none;">
element.
I have been able to stripe visible table rows without any problems
using native Javascript and the Prototype Javascript library, but not
w/ the jQuery Javascript library.
