如何從javascript在HTML表格中插入數據？

Question

我正在創建一個記錄數據的 chrome 擴展。 我有一個 html 表格草稿，我終於想出了如何讓它顯示在一個 csv 文件中。 但是，我一直在想辦法讓諸如 url 之類的數據顯示在表格中。 我已經在我的 js 文件中獲取了 url，我很好奇如何將它插入到表中。

彈出窗口.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        Activity Logger
    </title>
    <style>
    *{
        color:#2b2b2b;
        font-family: "Roboto Condensed";
     }
        table{ width:40%;}
        th{ text-align:left; color:#4679bd}
        tbody > tr:nth-of-type(even) { background-color:#daeaff;)
        button( cursor:pointer; margin-top:1rem;)
         
    </style>
</head>
<body>

    <!--<button> Log site </button>-->
    <script src="popup.js" charset="utf-8"></script>
    
    <h2>Activity Logger</h2>
    
    
    <table>
  <tr>
    <th>Timestamp</th>
    <th>Browser</th>
    <th>URL</th>
    <th>Url</th>
    <th>Protocol</th> 
    <th>Downloaded File Name</th> 
    <th>Description</th>
      
  </tr>
  <tr>
    <td>Google</td>
    <td>Google</td>
    <td>Google</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>

</table>
<a id="click-this" type= "button" onClick="exportTableToCSV('members.csv')">
    <u> Save as CSV </u>
    </a>

</body>
</html>

清單文件

{
    //Required naming
    "name" : "Activity logger",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This support includes the development of a  Chrome Browser Activity Logger.",
    
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js", "popup.js"]
        }
        
     ],
     
    
     "browser_action": {
        "default_icon": "act.png",
        "default_title": "Activity",
        "default_icon": "act.png",
        "default_popup": "popup.html"
        
     },
     "background": {
        "scripts": ["background.js"]
        
     },
     
     
     "permissions": ["tabs", "storage"]
    
    
    
    

}

內容.js

const re = new RegExp('bear', 'gi')
const matches = document.documentElement.innerHTML.match(re) || []

chrome.runtime.sendMessage({
  url: window.location.href,
  count: matches.length
})

彈出窗口.js

//loading div element url on page
document.addEventListener('DOMContentLoaded', function () {

  const bg = chrome.extension.getBackgroundPage()
  Object.keys(bg.bears).forEach(function (url) {
    const div = document.createElement('div')
    div.textContent = `${url}`
    document.body.appendChild(div)
    
  })


}, false)

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", exportTableToCSV);
 
    
});


function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
    
    csvFile = new Blob([csv], {type:"text/csv"});
                       
                       
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    
    document.body.appendChild(downloadLink);
    
    downloadLink.click();
}
                          
function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");
    
    for(var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        for(var j=0; j < cols.length; j++)
            row.push(cols[j].innerText);
        
        csv.push(row.join(","));
    }   
       
   
    //download csv file
    downloadCSV(csv.join("\n"), filename);
    
    
}

背景.js

window.bears = {}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  window.bears[request.url] = request.count
})


//create items shown in html file
chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.create({url: 'popup.html'})
})

Answer 1

在你的 HTML 代碼中，當你創建你的表格時，給它一個id這樣你就可以在你的 Javascript 中輕松引用它，例如

<table id='myLogTable'>
  ...
</table>

然后，您可以在 Javascript 中獲取對它的引用，例如dataTable = document.getElementById('myLogTable') 。

要在表格中添加行，一種快速而骯臟的方法是將額外的 HTML 寫入table元素的內容：

dataTable.innerHTML += "<tr><td>Some</td><td>test</td><td>data</td></tr>"

更健壯的方法是使用document.createElement()和Node.appendChild()方法構建一行數據並將其附加到表中。 這需要更多的代碼，但如果您執行諸如向表元素添加事件偵聽器之類的操作，則不太可能破壞事物。

如何從javascript在HTML表格中插入數據？

問題描述

1 個解決方案

解決方案1
0 2020-11-01 18:21:14

如何從javascript在HTML表格中插入數據？

問題描述

1 個解決方案

解決方案1 0 2020-11-01 18:21:14

解決方案1
0 2020-11-01 18:21:14