CODEWITHSUNDEEP
jqueryheightrowdatatables
user1006072
user1006072

Reputation: 963

Jquery - dynamically change a row height of a table.

I am using a Jquery's datatable. I have a table with id = "affectedRegion". It has a column with a radio button inside it. In part, some of the styling around this radio button cell gives each row it's height.

In a special case, I have to hide the radio button column by doing something like this

affectedRegion.fnSetColumnVis(0, false);

However, when I do this, the rows become much shorter than what I want. Since this code is shared at many other places, I would like to know if there is a way in Jquery that I can change the row height dynamically to maintain the same look and feel.

I tried the below and it doesn't work. 

$("#affectedRegion").css('height', '25px');

Thanks for your help in advance.

Upvotes: 4

Views: 24400

Answers (1)

David Hoerster
David Hoerster

Reputation: 28701

I set up a simple jsFiddle to demo setting the row height of a table row, and it seems to work fine. I'm using Chrome, if that helps.

I'm changing the height of the <tr> tag, if that helps.

If you have other questions, let me know and I'll update my answer.

Good luck. Hope this helps.

UPDATE Updated my fiddle here. If you have access to the index of the row to be resized, you can use jQuery's eq function to only affect that table row in your table. I'm not sure if this helps or not, but this allows you to get away from having an id or some sort of marker class assigned to each row.

HTML

<table id='affectedRegions'>
    <tr id='affectedRegion'>
        <td>Hello</td>
        <td>There</td>
    </tr>
    <tr id='affectedRegion2'>
        <td>Hello</td>
        <td>There</td>
    </tr>
</table>

jQuery

//change the height of the 2nd table row within #affectedRegions table
// eq() is zero-based.
$('#affectedRegions tr').eq(1).css('height', '200px');

Upvotes: 7

Related Questions