如何添加使用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>