Bug Tracker

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

File jquery-table-toggle-bug.html, 1.5 KB (added by darkoz, 12 years ago)

buug example and workaround

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <title>jQuery IE8 toggle bug</title>
5        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
6        <script>
7            $(function() {
8                //setup
9                var column = $("table td:nth-child(2)");
10                var div = $("div");
11               
12                //error
13                div.append("<p>At start -> display:" + column.css("display") + "</p>");
14                column.toggle();
15                div.append("<p>After 1 toggle -> display: " + column.css("display") + "</p>");
16                column.toggle();
17                div.append("<p style=\"color:red;\">After 2 toggles -> display:" + column.css("display") + " <- This should be table-cell or block</p>");
18
19                //workaround - dont use toggle
20                column.show();
21                div.append("<p>After column.show() -> display:" + column.css("display") + "</p>");
22            });
23        </script>
24        <style>
25            table { border-collapse:collapse; margin:20px; }
26            td { border:1px solid #ccc; padding:0 5px; }
27        </style>
28    </head>
29    <body>
30        <p>This is an IE8 issue only. Toggle works only when hiding table cells, but not when it needs to show it.</p>
31        <table>
32            <tr>
33                <td>1</td>
34                <td>2</td>
35                <td>3</td>
36                <td>4</td>
37            </tr>
38            <tr>
39                <td>4</td>
40                <td>3</td>
41                <td>2</td>
42                <td>1</td>
43            </tr>
44        </table>
45        <div></div>
46    </body>
47</html>