Mazen Mazen - 5 months ago 17
jQuery Question

Dynamically set table cells children div heights to 100% its row height

I am trying to "dynamically" update the height of each

div
to be equal to its row parent

I have this very simple code that does the job good but throughout all rows. So what I am finallygetting is setting all
td divs
with the greatest value within the whole table, which I don't want.

What I want is, to set all divs with the greatest height within the same row

Any suggestions?

function setdivHeights() {
var maxHeight = -1;
$('tbody tr td div:last-child').each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$('tbody td div:last-child').height(maxHeight);
$('tbody td div:last-child').addClass('cell');
}


and this is a simplified sample of my
html
code:

<table class="tablesorter" id="list">
<thead></thead>
<tbody>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
</tr>
</tbody>
</table>

Answer

Just do it per row instead of for all rows in your selector:

function setdivHeights() {
    trs = $('tbody tr');
    trs.each(function(){
        var maxHeight = -1;
        $(this).find('td div:last-child').each(function() {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
            }
        }).height(maxHeight).addClass('cell')
    }) 
}
Comments