HTML动态div在javascript调用时调整大小

因此，我使用javascript函数根据需要向表中添加行。我试图找出如何调整div的大小，以便在添加一行时，div的大小会增加以适应新行。我还需要旁边的div来调整大小，以便页面保持统一的样式。动态表的功能允许用户从表中添加和删除行。感谢您的帮助

多谢各位

     <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>            

被拘留少年全名




别名


性


年龄


出生日期

使用此选项将行添加到表中并扩展div：-

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

然后使用

x.removeChild（）用于删除

然后更改要触发事件的元素的事件处理程序，然后将代码放入其中，并对两个div进行更改

编辑：我使用了
getElementByClassName
来简化样式设置过程，这样附加的元素就位于表的样式设置类之下，并且只会随着形状的稳定而增加其大小。
如果这是一个选项，请使用jquery：

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

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

差不多吧。否则请使用javascript：

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

添加或删除行时，请尝试放置以下内容：

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";

注意：我在div中添加了一个Id标签，因此更容易处理它们。
div上的高度是固定的。我用一个固定的高度来对齐我需要的div，使布局像我复制的纸一样。