HTML Dynamic div resize on javascript call

Question

So i am using a javascript function to add rows based on need to a table. I am trying to figure out how to resize the div so that when a row is added the div increases in size to accomodate the new row. i also need the div next to it to resize so that the page keeps a uniform style. The function of the dynamic table allows for the user to add and delete rows from the table. Any help is appreciated.

Thank you.

     <div class="leftboxes leftline1">
        Full Name Of Detained Juvenile 
        </br>
        <input id="detaineeLastName" onfocus="if (this.value=='Last') this.value = ''"
        type="text" value="Last"/>
        <input id="detaineeFirstName" onfocus="if (this.value=='First') this.value = ''"
        type="text" value="First"/>
        <input id="detaineeMiddleName" onfocus="if (this.value=='Middle') this.value = ''" 
        type="text" value="Middle"/>
        </br>
        Aliases
        <table id="witnessTable" style="table-layout:fixed" border="1">        
            <tr>           
                <td style="width:0px"><input type="checkbox" name="chk" style="width:15px;margin-
                left:18px"/></td>          
                <td><input id="aliasLast" onfocus="if (this.value=='Last') this.value = ''"
                type="text" value="Last"/></td>
                <td><input id="aliasFirst" onfocus="if (this.value=='First') this.value = ''"
                type="text" value="First"/></td>
                <td><input id="aliasMiddle" onfocus="if (this.value=='Middle') this.value = ''"
                type="text" value="Middle"/></td>    
            </tr>    
        </table>
        <input type="button" value="Add Row" onclick="addRow('witnessTable')" />     
        <input type="button" value="Delete Row" onclick="deleteRow('witnessTable')" /> 
        </br> 
    </div>
    <div class="rightboxes rightline1">
        Sex
        </br>
        Age
        </br>
        DOB
    </div>            

Answer 1

use this for adding the rows to the table and extending the div:-

var y = document.createElment("the tag of the element wanted to be created");
var x = document.getElementByClassname("tables class");
x.appendChild(y);

then use x.removeChild(); for deletion.

then change the event handler for the element you want to trigger the event, and then put the code in it the makes the changes on both the divs.

edit: i used the getElementByClassName to simplify the styling process so that the appended elements just go under the styling class of the table and only increase its size with stable shape.

Answer 2

Use jquery if that is an option:

var divOneHeight = $("#div1ID").height() + 10;
$("#div1ID").height(divOneHeight);

var divOneWidth = $("#div1ID").width() + 10;
$("#div1ID").width(divOneWidth);

Something like that. Else use javascript:

document.getElementById("div1ID").style.width += 10;

Answer 3

When you add or remove a row, try putting this:

var h = myTable.clientHeight;
var divRight = document.getElementById("right");
var divLeft = document.getElementById("left");

divRight.style.height = (h + 60) + "px";
divLeft.style.height = (h + 60) + "px";

Note I added an Id label to the DIVs so it's easyer to handle them.