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

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

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

Answer 2

You could try setting display:auto, but honestly, I've had nothing but trouble manually setting the display property for table rows/cells.

What I've found usually works is creating a CSS class called "hidden" that has display:none. Rather than show()ing, I just remove that class.

Answer 3

tried ?

 $('#hiddenTr').css('display','block');

Also, you should put in a <TD></TD> with something in it, at least a   so the row is not collapsed by your browser client. Diffrent clients behave diffrently...

Answer 4

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.