I have retrieved the height of a dynamic table now I need to put that height into another element

Question

I used this code to get the height of a dynamic table

var table = document.getElementById("test");
document.write(table.offsetHeight);

But now I need to use that value to set the height of a div beside that table. I don't know how to do this. I was hoping it could be done easily through the inline style of the div but I couldn't do it.

Thanks

`div_element.offsetHeight = table.offsetHeight` should work. — potashin, Jun 10 '14 at 15:59

score 0 · Accepted Answer · answered Jun 10 '14 at 16:05

0

Since you already know how to get the table's offsetHeight, you can set it to the div by the DOM style property:

var table = document.getElementById("test");
document.getElementById("myDiv").style.height = table.offsetHeight + "px";

answered Jun 10 '14 at 16:05

LcSalazar

16,524
3
37
69

I tried and it did work: var table = document.getElementById("table"); document.getElementById("testing").style.height = table.offsetHeight + "px";. Not sure if I placing the code in the correct area of the page. – smack-a-bro Jun 10 '14 at 16:09
I meant to say didn't work. – smack-a-bro Jun 10 '14 at 16:22
Here's a working fiddle showing it: http://jsfiddle.net/6bEjq/ – LcSalazar Jun 10 '14 at 16:32
Whats the reason for the button? I need it to do this when the page loads. – smack-a-bro Jun 10 '14 at 16:36
It was just an example... Here is it without the button: http://jsfiddle.net/6bEjq/1/ – LcSalazar Jun 10 '14 at 16:37
Good looking. That worked. Thanks a ton! – smack-a-bro Jun 10 '14 at 16:43

score 0 · Answer 2 · answered Jun 10 '14 at 16:10

0

you can do

var height=$('table').height() to get the height.

For specific div

$('div').height(height)

rather than writing table you can specify its id also. Same with div. You can specify the id of div to change the height of particular div

answered Jun 10 '14 at 16:10

Tanul

354
4
20

What if he is not using JQuery? – LcSalazar Jun 10 '14 at 16:12

score 0 · Answer 3 · answered Jun 10 '14 at 16:12

Here is an example of how to do this using jquery when the page loads:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table id="table" style="width: 200px; border: 1px solid black; float: left;">
        <tr>
            <td>test</td>
            <td>tttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
        </tr>
        <tr>
            <td>test</td>
            <td>tttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
        </tr>
        <tr>
            <td>test</td>
            <td>tttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
        </tr>
        <tr>
            <td>test</td>
            <td>tttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
        </tr>
    </table>
    <div id="adjDiv" style="float:left; border: 1px solid red;">
        Div next to the table
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Set height using the id of my div and the height of your table
            $('#adjDiv').height($('#table').height());
        });
    </script>
</body>
</html>

I have retrieved the height of a dynamic table now I need to put that height into another element

3 Answers3