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

Question

我在一个使用 DOJO 工具包的项目中生成了以下 table：

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

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

在table生成之后，我想添加一个新的table header（这是一个新的crudRow crudHeader）来添加D，因此为每个项目添加一个新的单元格, 以显示其D值。

我该怎么做？

Answer 1

首先，您必须使用 appendChild() 方法在 div header 中插入新的 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>

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

How to add columns and rows in table using Javascript

html

javascript

dojo

crud