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

首先，您必须使用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>

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

1 个答案: