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

使用它将行添加到表中并扩展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来简化样式处理过程，以便附加的元素只在表格的样式类下面，并且只增加其大小和稳定的形状。

Answer 2

如果是一个选项，请使用jquery：

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

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

这样的事情。否则使用javascript：

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

Answer 3

添加或删除行时，请尝试输入：

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标签，因此可以更轻松地处理它们。

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

3 个答案: