如何从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