Bug Tracker

Ticket #4753: jquery-table-toggle-bug.html

File jquery-table-toggle-bug.html, 1.5 KB (added by darkoz, July 13, 2009 01:41AM UTC)

buug example and workaround

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery IE8 toggle bug</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
		//setup
		var column = $("table td:nth-child(2)");
		var div = $("div");
                
		//error
		div.append("<p>At start -> display:" + column.css("display") + "</p>");
		column.toggle();
		div.append("<p>After 1 toggle -> display: " + column.css("display") + "</p>");
                column.toggle();
		div.append("<p style=\"color:red;\">After 2 toggles -> display:" + column.css("display") + " <- This should be table-cell or block</p>");

		//workaround - dont use toggle
		column.show();
		div.append("<p>After column.show() -> display:" + column.css("display") + "</p>");
            });
        </script>
        <style>
            table { border-collapse:collapse; margin:20px; }
            td { border:1px solid #ccc; padding:0 5px; }
        </style>
    </head>
    <body>
        <p>This is an IE8 issue only. Toggle works only when hiding table cells, but not when it needs to show it.</p>
	<table>
	    <tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	    </tr>
	    <tr>
		<td>4</td>
		<td>3</td>
		<td>2</td>
		<td>1</td>
	    </tr>
	</table>
	<div></div>
    </body>
</html>

Download in other formats:

Original Format