如何使用Javascript在表中添加列和行

I have the following table generated in a project which makes use of DOJO 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>

It's basically a vertical table (with headers as the first column, and every item is another column). Suppose the database items has values for properties A,B,C and D, but the table initially renders only A,B,C properties in the view.

它基本上是一个垂直表（标题为第一列，每个项目都是另一列）。假设数据库项具有属性A，B，C和D的值，但该表最初仅在视图中呈现A，B，C属性。

After table generation, I want to add a new table header (which is a new crudRow crudHeader) to add D, and consequently add a new cell for every item, to show its D value.

生成表格之后，我想添加一个新的表格标题（这是一个新的crudRow crudHeader）来添加D，然后为每个项目添加一个新单元格，以显示其D值。

How can I do this?

我怎样才能做到这一点？

1 个解决方案

#1

First of all you have to insert new childin div header using appendChild() method.

首先，您必须使用appendChild（）方法插入新的childin div头。

Next step is to iterate all crudColumn elements and add a new div for each crudColumn.

下一步是迭代所有crudColumn元素并为每个crudColumn添加一个新div。

Here is an example.

这是一个例子。

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>

#1