tr display none crashes ie9

css, internet-explorer-9, javascript

Solution

I have the same problem, and have found a solution. First of all I should say that the problem is actual for any row in table with style borderCollapse equal to collapse (no matter if it is declared inline or in head) in IE9.

My solution:

function hideRow(tableNode, rowNode, hide){
    if(hide){
        if(window.navigator.userAgent.search('MSIE 9.0') != -1){
            var initValue = tableNode.style.borderCollapse;
            tableNode.style.borderCollapse = 'separate';
            rowNode.style.display = 'none';
            tableNode.style.borderCollapse = initValue;
        }else{
            rowNode.style.display = 'none';
        }
    }else{
        rowNode.style.display = '';
    }
}

Or even shorten:

function hideRow(tableNode, rowNode, hide){
    var initValue = tableNode.style.borderCollapse;
    tableNode.style.borderCollapse = 'separate';
    rowNode.style.display = hide ? 'none' : '';
    tableNode.style.borderCollapse = initValue;
}

Problem

This code crashes ie9 as i am having this problem in my code .. any work around will be appreciated .. This is not a problem with the previous versions of ie .. Thanks .. ``` <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en"> <head></head> <body> <table style="border-collapse: collapse"> <tr id="firsttr"> <td colspan="2"></td> <td></td> </tr> <tr id="secondtr"> <td></td> <td style="border: 1px solid #D2D2D2">Move cursor here</td> <td></td> </tr> </table> </body> <style type="text/css"> #secondtr:hover { display: none; } </style> </html> ``` Even using onclick event crashes the browser .. try the following .. Move cursor here ``` <script type="text/javascript"> function HideThis() { document.getElementById('secondtr').style.display = 'none'; } </script> ```

Original source