JavaScriptダイナミックdivのサイズ変更

Question

私はテーブルに必要に応じて行を追加するためにJavaScript関数を使用しています。私はdivをサイズ変更する方法を理解しようとしているので、行が追加されたときに新しい行に対応するために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

あなたが行を追加または削除すると、これを入れてみてください：それはそれらを処理するためにeasyerですので

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ラベルを追加しました。

Answer 2

使用このテーブルに行を追加し、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 3

使用しjqueryのものがオプションである場合：そのような

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

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

何か。そうではJavaScriptを使用します。

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