HTML动态div调整javascript调用

所以我使用的是一个JavaScript函数来根据需要添加行到一个表。我想弄清楚如何调整div的大小，以便在添加一行时div增加以适应新行。我还需要它旁边的div来调整大小，以便页面保持统一的风格。动态表的功能允许用户添加和删除表中的行。任何帮助表示赞赏。HTML动态div调整javascript调用

谢谢。

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

来源

2012-03-12 Michael Cole

div有固定的高度吗？ – MatuDuke 2012-03-12 17:43:01

div上的高度是固定的。我正在使用固定的高度来对齐我需要它们的div，并使布局像我正在复制的纸张一样。 – 2012-03-12 17:47:48

当您添加或删除行，可以尝试在此：

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所以它easyer来处理它们。

来源

2012-03-12 18:04:17 MatuDuke

使用这种添加的行表和扩展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简化造型过程，使得附加元素只是去造型类表中的下和仅增加其大小与形状稳定。

来源

2012-03-12 17:52:02 engma

使用jQuery，如果这是一个选项：

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

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

类似的东西。否则，请使用javascript：

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

来源

2012-03-12 18:01:53 jacqijvv

HTML动态div调整javascript调用

回答

相关问题