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

回答

相關問題