Changing table row height

Question

I am trying to change the row height of a table belonging to a particular class to 0.

Currently I am doing this:

$("#table_rolecart tbody").append('<tr class='hide'><td>Start Date: <input type="text" value="" id="ar_startdate"></td><td>End Date: <input type="text" value="" id="ar_enddate"></td></tr>');
$('.hide').height = "0"

It's still not zero, how do I set the height to 0 or set display style to none for those <tr>s?

Answer 1

Try this: $('.hide').height(0);

Answer 2

Use the css function:

$('.hide').css('height', '0');

If you want to remove them from sight, you can also set display: none:

$('.hide').css('display', 'none');

You can also remove them entirely:

$('.hide').remove();

If you don't need to hide them dynamically, however, you should just be using CSS:

.hide {
    height: 0;
    /* or display: none */
}

Answer 3

Height is a css property, so you can set it with the css function

$('.hide').css("height", "0");

Note that you can also hide it with

$('.hide').css("display", "none");

Answer 4

Either of these techniques will set a row's height to 0:

$(".hide").height(0);
$(".hide").css("height", 0);

But tables are tricky and setting the height to 0 won't cause a row to hide. The easiest way to hide the row is to use either of these techniques:

$(".hide").hide();
$(".hide").css("display", "none");

But, if you want to hide the row using height (for whatever reason), also set the line-height to 0. Then, on the child cells, set the padding to 0 (and possibly also the border) and set overflow to hidden.

$(".hide").css({
    height: 0,
    lineHeight: 0
});
$(".hide > *").css({
    padding: 0,
    overflow: "hidden"
});

But, in your case, even this won't work, because the input controls still display. You'd have to wrap the cell contents in a container such as a div and hide that.