2017-01-30 27 views
2

У меня есть следующая таблица генерируется в проекте, который делает использование Dojo Toolkit:Как добавить столбцы и строки в таблице с помощью Javascript

<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.

Как это сделать?

ответ

1

Прежде всего, вы должны вставить новый child в заголовок div с использованием метода appendChild().

Следующий этап iterate все crudColumn элементов и добавить div для каждого crudColumn.

Вот пример.

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>

+0

Это говорит мне "не может прочитать свойство 0 неопределенных" (заголовок вар = table.rows [0]). Может быть, у вас нет одного из моих разделов? Третья строка моего кода, точно. – bransharp

+0

Можете ли вы включить и ваш 'css'? –

+0

@ bransharp, я обновил свой ответ. –