如何从 javascript 在 HTML 表中插入数据？答案

【问题标题】：How to insert data in HTML table from javascript?如何从 javascript 在 HTML 表中插入数据？
【发布时间】：2020-11-01 17:45:05
【问题描述】：

我正在创建一个记录数据的 chrome 扩展程序。我有一个草稿 html 表格，我终于想出了如何让它显示在 csv 文件中。但是，我一直在试图弄清楚下一步以使诸如 url 之类的数据显示在表格中。我已经在我的 js 文件中抓取了 url，我很好奇如何将它插入到表格中。

popup.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>

manifest.json

{
    //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"]
    
    
    
    

}

content.js

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

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

popup.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);
    
    
}

background.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'})
})

【问题讨论】：

确实不清楚问题所在，因此请尝试删除不必要的信息并专注于问题。请注意，弹出窗口有自己的开发工具，您可以在其中调试代码并查看错误 - 在弹出窗口内右键单击并单击“检查”。我看到的一些问题：1）从你的html中删除onClick=，more info。 2) chrome.browserAction.onClicked 什么都不做，因为 manifest.json 中有 default_popup。 3）您可以删除整个后台脚本，而是从弹出窗口向内容脚本发送消息以直接询问值。 4) 清单中有两个default_icon。

标签： javascript html google-chrome-extension html-table export-to-csv

【解决方案1】：

在您的 HTML 代码中，当您创建表格时，给它一个 id 以便您可以在 Javascript 中轻松引用它，例如

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

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

要向表格中添加行，一种快速而肮脏的方法是在table元素的内容中写入额外的HTML：

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

更健壮的方法是使用document.createElement() 和Node.appendChild() 之类的方法来构建一行数据并将其附加到表中。这需要更多的代码，但如果您执行向表格元素添加事件侦听器等操作，则不太可能破坏事情。

【讨论】：