代码之家 › 专栏 › 技术社区 › tesicg

如何从JavaScript数组填充div表?

css-tables html javascript

-4

tesicg · 技术社区 · 7 年前

我不熟悉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表中的特定单元格。

1 回复 | 直到 7 年前

clami219 bishop 7 年前

仅使用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>