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

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.