如何从 JavaScript 数组填充 div-table？

Question

我是 JavaScript 的新手，想知道如何从 JavaScript 数组填充 div-table。 div-table 如下所示：

<div id="palette" style="border: solid 1px black; width: 100%; height: 100%;">
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
</div>

数组是一维数组，包含字符串。数组中的每个字符串都应该在 div-table.

中的特定单元格中

Answer 1

仅使用 Javascript（使用 jQuery 可能更容易），您可以执行以下操作：

使用函数.getElementById()访问包含元素
使用函数.getElementsByClassName()访问子元素
使用属性 .innerText 写入所选元素。

这是一个如何操作的工作示例：

var arr = ['Adam','Bruce','Clive','Don','Evan','Francis', 'Glenn', 'Henry', 'Ivan', 'Jade', 'Ken', 'Logan', 'Mario', 'Nathan', 'Omar', 'Quentin', 'Peter', 'Roman'];

var palette = document.getElementById("palette");

var rows = palette.getElementsByClassName("divTableRow");

var counter = 0;

for (var row of rows) {
  var cells = row.getElementsByClassName("divTableCell");
  for (var cell of cells) {
    cell.innerText = arr[counter];
    counter++;
  };
};

#palette {
  border: none;
  display: table;
}

.divTableRow {
  width: 100%;
  display: table-row;
}

.divTableCell {
  width: 28%;
  padding: 1%;
  border: 1px solid #000;
  display: table-cell;
}

<div id="palette" style="border: solid 1px black; width: 100%; height: 100%;">
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
        <div class="divTableCell"></div>
    </div>
</div>

如何从 JavaScript 数组填充 div-table？

How to populate div-table from JavaScript array?

javascript

html

css-tables