javascript - HTML 动态 div 在 javascript 调用上调整大小

Question

所以我正在使用 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>            

Answer 1

当你添加或删除一行时，试着把这个:

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 标签，以便更容易处理它们。