我想一次在多個 HTML 表格元素中顯示來自資料陣列的多個值。資料值會發生變化，需要用 HTML 覆寫。我通過使用嵌套嘗試了類似下面的方法，forEach但它不起作用。我該怎么辦？
我試過了，appendchild但它會隨著資料值的更新而創建新的單元格，我不想要它。
HTML
<table>
<thead>something</thead>
<tbody>
<tr id="changeThis">
<th>row head</th>
<td>0</td><!-- 1 -->
<td>0</td><!-- 2 -->
<td>0</td><!-- 3 -->
<td>0</td><!-- 4 -->
</tr>
</tbody>
</table>
js
const data = [1, 2, 3, 4]
const changeThis = document.querySelector("#changeThis");
changeThis.forEach(cellItem => {
data.forEach(dataItem => {
cellItem.innerHTML = dataItem
})
})
謝謝您的幫助！
uj5u.com熱心網友回復：
您可以使用querySelectorAll選擇所有 tds 并添加您的內容
const data = [1, 2, 3, 4]
const changeThis = document.querySelectorAll("#changeThis td");
changeThis.forEach((cellItem,idx) => {
cellItem.innerHTML = data[idx];
})<table>
<thead>something</thead>
<tbody>
<tr id="changeThis">
<th>row head</th>
<td>0</td><!-- 1 -->
<td>0</td><!-- 2 -->
<td>0</td><!-- 3 -->
<td>0</td><!-- 4 -->
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
你也可以這樣做...
const
data = [1, 2, 3, 4]
, changeThis = document.querySelector('#changeThis')
;
let index = 0;
for (let cell of [...changeThis.cells])
{
if ( cell.matches('td'))
cell.textContent = data[index ]
}<table>
<thead>something</thead>
<tbody>
<tr id="changeThis">
<th>row head</th>
<td>0</td><!-- 1 -->
<td>0</td><!-- 2 -->
<td>0</td><!-- 3 -->
<td>0</td><!-- 4 -->
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398170.html
標籤：javascript 数组 排序