I'm guessing this is a weird css specificity issue for IE, but it's
hard to tell without seeing your stylesheet. Also, you can use the
DOM viewer with the IE developer toolbar to see if the class is
actually being applied to the element (even if it might not appear to
do so).
That said, your plain JS code is *replacing* "no-display" with
"display-table-row-group" while your jQuery code is simply adding the
"display-table-row-group" class to what's there already.
There are a couple ways you can replace all existing classes with a
new one using jQuery.
$('#add-new-rows').removeClass().addClass('display-table-row-group');
$('#add-new-rows').attr('class', 'display-table-row-group');
Hope that helps.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 25, 2007, at 4:22 PM, Mindjoy wrote:
I am using onclick event on input type="button" to addClass, but there
is no effect in IE 6, while it works fine in Mozilla and Opera
browsers. I know that IE works fine with such CSS styles, since it
works with my simple code without jQuery (document.getElementById
('add-
new-rows').className='display-table-row-group';). Please investigate.
Here is the code:
<form>
<input type="button" name="my-button" value="Add Something"
onclick="$('#add-new-rows').addClass('display-table-row-group');"/>
</form>
...
<table>
<tbody id="add-new-rows" class="no-display">
<tr class="display-table-row-group">
<td>Something</td>
</tr>
</tbody>
</table>
CSS:
.no-display
{
display: none;
}
.display-table-row-group
{
display: table-row-group;
}
