如何從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？

回答

相關問題