JavaScript-從googlesheet傳遞的資料僅顯示第一列而不是整個資料

谷歌表：https ://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/edit?usp=sharing

如何顯示我的谷歌表格中的所有資料？

        <tr id="tr">
          <td name="Name" id="Name"></td>
          <td name="Department" id="Department"></td>
          <td name="Title" id="Title"></td>
          <td name="Email" id="Email"></td>
          <td name="Extension" id="Extension"></td>
        </tr>

<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>

        var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
        
        fetch(url).then(result => result.text()).then(function(csvtext){

            return csv().fromString(csvtext);

        }).then(function(csv) {
            
            csv.forEach(function(row){
                
                document.getElementById("Name").innerHTML = row.Name;
                document.getElementById("Department").innerHTML = row.Department;
                document.getElementById("Title").innerHTML = row.Title;
                document.getElementById("Email").innerHTML = row.Email;
                document.getElementById("Extension").innerHTML = row.Extension;
                
            });
        });

uj5u.com熱心網友回復：

嘿看起來你有幾個錯誤：

第一個錯誤，

像這樣：

<table>

<tr id="tr">
    <td name="Name" id="name"></td>
    <td name="Department"></td>
    <td name="Title"></td>
    <td name="Email"></td>
    <td name="Extension"></td>
  </tr>

</table>

同樣在您的forEach函式中，要訪問檔案中的不同 HTMLNode，只需這樣做：

fetch(url).then(result => result.text()).then(function(csvtext){
    return csv().fromString(csvtext);
}).then(function(csv) {
    //main.innerHTML =  JSON.stringify(csv);
    
    csv.forEach(function(row){
        document.getElementById("name").innerHTML  = row.Name // just use document
        
    });
});

你的最后一個錯誤是大寫。它row.Name不是row.name

這是我最終解決方案的復制和粘貼，以使其正常作業：

<table>

<tr id="tr">
    <td name="Name" id="name"></td>
    <td name="Department"></td>
    <td name="Title"></td>
    <td name="Email"></td>
    <td name="Extension"></td>
  </tr>

</table>


<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
<script src="./index.js">

    var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
    var tableRow = document.querySelector("tr");

    console.log(tableRow)

            
    fetch(url).then(result => result.text()).then(function(csvtext){
        return csv().fromString(csvtext);
    }).then(function(csv) {
        //main.innerHTML =  JSON.stringify(csv);
        
        csv.forEach(function(row){
            document.getElementById("name").innerHTML  = row.Name 
            
        });
    });
</script>

uj5u.com熱心網友回復：

按照要求：

如何修改代碼以顯示所有名稱：

值得注意的變化是，我清空了 HTML 并創建了一個<tbody>附加動態生成的 HTML。

在forEach回圈中，我創建了一個<tr>HTMLNode 并將動態生成<td>的節點附加到newTableRow.

newTableRow然后我將所有新資料附加到tableBody.

<table id="table">

    <tbody id="tableBody">

        
    </tbody>

</table>


<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
<script>

    var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
    var tableBody = document.getElementById("tableBody");

            
    fetch(url).then(result => result.text()).then(function(csvtext){
        return csv().fromString(csvtext);
    }).then(function(csv) {
        
        csv.forEach(function(row){
            var newTableRow = document.createElement("tr")

            newTableRow.innerHTML  = `<td name="name">${row.Name}</td>`
            newTableRow.innerHTML  = `<td name="department">${row.Department}</td>`
            newTableRow.innerHTML  = `<td name="email">${row.Email}</td>`
            newTableRow.innerHTML  = `<td name="title">${row.Title}</td>`
            newTableRow.innerHTML  = `<td name="extension">${row.Extension}</td>`

            tableBody.appendChild(newTableRow)
            
        });
    });
</script>

標籤：javascripthtml谷歌表格

上一篇：如何阻止Tkinter按鈕自動調整較長文本的大小？

下一篇：使用i標簽切換跨度文本