如何从 JavaScript 数组填充 div 表？答案

【问题标题】：How to populate div-table from JavaScript array?如何从 JavaScript 数组填充 div 表？
【发布时间】：2017-07-25 05:42:16
【问题描述】：

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

<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 中的特定单元格。

【问题讨论】：

您能否进一步举例说明您希望如何填充表格以及 js 数组的结构？
数组是一维的，包含字符串。数组中的每个字符串都转到 div-table 中的特定单元格。
你能告诉我们你到目前为止的想法吗？
只有上面的HTML和CSS，这并不重要。

标签： javascript html css-tables

【解决方案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>

【讨论】：