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

-4

我是JavaScript新手，想知道如何从JavaScript数组中填充一个div表。该div表格如下所示：如何从JavaScript数组填充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中的特定单元格中。

来源

2017-07-24 tesicg

你能进一步说明你希望如何被填充表和JS数组是如何构成的？ – clami219

该数组是一维的并包含字符串。数组中的每个字符串都转到div-table中的特定单元格。 – tesicg

你能告诉我们你到底想到了什么吗？ –

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

来源

2017-07-24 14:03:02 clami219

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

回答

相关问题