我正在處理 HTML 中的表格，但我有以下疑問：我正在從 JSON 陣列中獲取資料：{"key":["1","2","3"],"values":["4","5","6"]}當嘗試將它們插入表格而不是將每個資料放入列中時，所有資料都放在第一個列，我用來在表中插入資料的 JS 代碼是：
var idtabla = document.getElementById("idtabla")
idtabla.innerHTML = window.location.href.split("/tabla/")[1]
function getJson(){
var id = window.location.href.split("/tabla/")[1]
var table = document.getElementById("table")
$.get( `/json`, (data) => {
if(data.error){
idtabla.innerHTML = 404 ", tabla no encontrada"
} else {
var keys = data.key.forEach(element => {
table.innerHTML = `<tr><td>${element}</td>`
});
var values = data.values.forEach(element => {
table.innerHTML = `<td>${element}</td></tr>`
});
}
})
}
它給我的結果是這樣的：
怎么可能解決？非常感謝。
uj5u.com熱心網友回復：
有兩個問題。
首先，您不能innerHTML像那樣添加部分 HTML。每當您分配給 時innerHTML，它都會完全決議結果。如果有任何未關閉的標簽，它們會自動關閉。如果您想以增量方式構建 HTML，您應該通過附加到一個字串來完成，然后將完成的字串分配給innerHTML.
其次，您將所有值附加到所有鍵之后，因此它們不會在匹配的行中。您需要在同一個回圈中附加鍵和值。由于forEach()將陣列索引傳遞給回呼函式，因此您可以使用它來索引另一個陣列。
let tableHTML = '';
data.keys.forEach((key, i) => {
tableHTML = `<tr><td>${key}</td><td>${data.values[i]}</td></tr>`;
});
table.innerHTML = tableHTML;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/503680.html