Change table row display property

Question

I have an html page with a table that contains a hidden row:

<table>
  <tr id="hiddenTr" style="display:none">
    ...
  </tr>
</table>

I need to make it visible at client side using jquery. I tried this

$('#hiddenTr').show();

and this

$('#hiddenTr').css('display', 'table-row');

Both implementations don't work for me. Furthemore the second one is not crossbrowser.

UPD. Sorry, guys. That was my fault: I mistyped tr element id. That's strange $('hiddenTr') didn't return null...

Answer 1

I always set the style.display property to "" (empty string) to show a hidden table row:

var row = document.getElementById('row_id');
row.style.display = "";   // shows the row

To hide it again:

row.style.display = "none";   // hides the row

in jQuery , this would be:

$("#row_id").css("display", ""); // show the row

or

$("#row_id").css("display", "none");  // hides the row

IE doesn't seem to like the 'table-row' value for display. And 'block' is not correct, and it seems to screw up the display in other browsers sometimes.

Answer 2

The first one should work. Are you wrapping it in $(document).ready(function(){}); ?

$(document).ready(function(){
    $('#hiddenTr').show();
});