我的目標是在我的網路應用程式中以表格形式顯示來自 Google 表格的資料表。腳本僅顯示data column從dataArray. 任何人都可以幫忙，為什么此代碼只能附加最后一個資料列而不是全部。
代碼.gs
function getTableDataTV(){
const ws = SpreadsheetApp.openById("").getSheetByName("Sheet2");
const data = ws.getRange (1,1,ws.getLastRow(), 9).getDisplayValues();
return data
HTML
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded",function(){
google.script.run.withSuccessHandler(generateTable).getTableDataTV();
});
function generateTable(dataArray){
var tabledb = document.getElementById("ptable");
console.log(dataArray);
dataArray.forEach(function(item, index){
if(index == 0){
var theaddb = document.createElement("thead");
var rhead = document.createElement("tr");
var th = document.createElement("th");
console.log(dataArray[0].length);
for(var i=0;i<(dataArray[0].length);i ){
th.textContent = item[i];
rhead.appendChild(th);
}
theaddb.appendChild(rhead);
tabledb.appendChild(theaddb);
}
else if(index > 0)
{
var tbody = document.createElement("tbody");
var rbody = document.createElement("tr");
var td = document.createElement("td");
for(var i=0;i<(dataArray[0].length);i ){
td.textContent = item[i];
rbody.appendChild(td);
}
tbody.appendChild(rbody);
tabledb.appendChild(tbody);
}
});
}
</script>
</head>
<body>
<div class="col s12">
<table id = "ptable">
</table>
</div>
</body>
</html>
控制臺日志（資料陣列）；
?
0: Array(9) [ "DATE", "TITLE 1", "TITLE 2", … ]
1: Array(9) [ "2021-11-01", "3094392", "6338933", … ]
?2: Array(9) [ "2021-11-02", "3841183", "6731805", … ]
?3: Array(9) [ "2021-11-03", "5267740", "7713644", … ]
?4: Array(9) [ "2021-11-04", "3144660", "6177727", … ]
?5: Array(9) [ "2021-11-05", "3677444", "8649906", … ]
uj5u.com熱心網友回復：
這里的問題是您在 for 回圈之外宣告了 td 元素，然后繼續更改并附加相同的元素。
嘗試像這樣修改你的代碼：
for(var i=0;i<(dataArray[0].length);i ){
var td = document.createElement("td");
td.textContent = item[I];
rbody.appendChild(td);
}
uj5u.com熱心網友回復：
在你的情況下，如何修改generateTable如下？
修改后的腳本：
function generateTable(dataArray) {
var tabledb = document.getElementById("ptable");
var tbody = document.createElement("tbody");
dataArray.forEach(function (item, index) {
var len = item.length;
if (index == 0) {
var theaddb = document.createElement("thead");
var rhead = document.createElement("tr");
for (var i = 0; i < len; i ) {
var th = document.createElement("th");
th.textContent = item[i];
rhead.appendChild(th);
}
theaddb.appendChild(rhead);
tabledb.appendChild(theaddb);
} else {
var rbody = document.createElement("tr");
for (var i = 0; i < len; i ) {
var td = document.createElement("td");
td.textContent = item[i];
rbody.appendChild(td);
}
tbody.appendChild(rbody);
}
});
tabledb.appendChild(tbody);
}
var th = document.createElement("th");并var td = document.createElement("td");包含在 for 回圈中。tabledb.appendChild(tbody)移到回圈的外側。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/389322.html