Comment ajouter des colonnes et des lignes dans le tableau en utilisant Javascript

Question

je le tableau suivant généré dans un projet qui utilise toolkit 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> 

Il est essentiellement une table verticale (avec les en-têtes comme la première colonne, et chaque article est une autre colonne). Supposons que les éléments de base de données ont des valeurs pour les propriétés A, B, C et D, mais que la table ne restitue initialement que les propriétés A, B, C dans la vue. Après la génération de la table, je souhaite ajouter un nouvel en-tête de table (qui est un nouveau crudRow crudHeader) pour ajouter D, et par conséquent ajouter une nouvelle cellule pour chaque élément, pour afficher sa valeur D.

Comment est-ce que je peux faire ceci?

Answer 1

Tout d'abord, vous devez insérer le nouveau child dans l'en-tête div en utilisant la méthode appendChild().

L'étape suivante consiste à iterate tous les élémentset d'ajouter un nouveau div pour chaque crudColumn.

Voici un exemple.

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>