如何添加使用Javascript

Question

表列和行我有一個項目所產生的下表，這使得使用Dojo工具包：

<div id="table" class="crudTable"> 
    <div class="crudContainer"> 
    <div class="crudHeaderColumn crudColumn"> 
     <div class="crudRow crudHeader">A</div> 
     <div class="crudRow crudHeader">B</div> 
     <div class="crudRow crudHeader">C</div> 
    </div> 

    <div class="crudColumn"> 
     <div class="crudRow">1</div> 
     <div class="crudRow">3</div> 
     <div class="crudRow">3</div> 
    </div> 

    <div class="crudColumn"> 
     <div class="crudRow">4</div> 
     <div class="crudRow">5</div> 
     <div class="crudRow">6</div> 
    </div> 
    </div> 
</div> 

這基本上是一個垂直表（用頭爲第一列，每個項目是另一列）。假設數據庫項具有屬性A，B，C和D的值，但該表最初僅在視圖中呈現A，B，C屬性。

表生成後，我想添加一個新的表頭（這是一個新的crudRow crudHeader）添加D，並因此爲每個項添加一個新單元，以顯示其D值。

我該怎麼做？

Answer 1

首先，您必須使用appendChild()方法在div標頭中插入新的child標頭。

下一步是要iterate所有crudColumn元素，併爲每個crudColumn添加一個新的div。

這裏是一個例子。

var button=document.getElementById('change'); 
 
var table=document.querySelector('#table .crudContainer'); 
 
button.onclick=function(){ 
 
    var header=document.querySelector('#table .crudHeaderColumn'); 
 
    var newDiv=document.createElement('div'); 
 
    newDiv.innerHTML="D"; 
 
    header.appendChild(newDiv); 
 
    
 
    var rows=document.querySelectorAll('#table .crudContainer .crudColumn'); 
 
    for(var i=1;i<rows.length;i++){ 
 
     var row=rows[i]; 
 
     var newDiv=document.createElement('div'); 
 
     newDiv.innerHTML="new cell"; 
 
     row.appendChild(newDiv); 
 
    } 
 
}

.crudColumn div{ 
 
    float:left; 
 
}

<div id="table" class="crudTable"> 
 
    <div class="crudContainer"> 
 
    <div class="crudHeaderColumn crudColumn"> 
 
     <div class="crudRow crudHeader">A</div> 
 
     <div class="crudRow crudHeader">B</div> 
 
     <div class="crudRow crudHeader">C</div> 
 
    </div> 
 
    <br> 
 
    <div class="crudColumn"> 
 
     <div class="crudRow">1</div> 
 
     <div class="crudRow">3</div> 
 
     <div class="crudRow">3</div> 
 
    </div> 
 
    <br> 
 
    <div class="crudColumn"> 
 
     <div class="crudRow">4</div> 
 
     <div class="crudRow">5</div> 
 
     <div class="crudRow">6</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<button id="change">Change</button>