Fatal编程技术网
  • javascript/
  • 如何从javascript在HTML表中插入数据？

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

javascript html google-chrome-extension

如何从javascript在HTML表中插入数据？,javascript,html,google-chrome-extension,html-table,export-to-csv,Javascript,Html,Google Chrome Extension,Html Table,Export To Csv,我正在创建一个记录数据的chrome扩展。我有一个html表格草稿，我终于想出了如何在csv文件中显示它。然而，我一直在努力找出下一步，以便在表中显示url等数据。我在我的js文件中抓取了这个url，我很好奇如何将它插入表中 popup.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

我正在创建一个记录数据的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>
popup.js

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

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

//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);
    
    
} 

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'})
})
在HTML代码中，当您创建表时，给它一个
id
，以便您可以在Javascript中轻松地引用它，例如

<table id='myLogTable'>
  ...
</table>
一种更健壮的方法是使用像和这样的方法来构建一行数据并将其附加到表中。这需要更多的代码，但如果您执行向表元素添加事件侦听器之类的操作，则不太可能破坏它。

在HTML代码中，创建表时，为表指定一个
id
，以便您可以在Javascript中轻松地引用它，例如

<table id='myLogTable'>
  ...
</table>
一种更健壮的方法是使用像和这样的方法来构建一行数据并将其附加到表中。这需要更多的代码，但如果您执行向表的元素添加事件侦听器之类的操作，则不太可能破坏这些内容。

确实不清楚问题出在哪里，因此请尝试删除不必要的信息并关注问题。请注意，弹出窗口有自己的devtools，您可以在其中调试代码并查看错误-在弹出窗口内单击鼠标右键，然后单击“检查”。我看到一些问题：1）从html中删除
onClick=
。2） chrome.browserAction.onClicked不执行任何操作，因为manifest.json中有
default\u弹出窗口
。3） 您可以删除整个后台脚本，而是从弹出窗口向内容脚本发送一条消息，直接询问值。4） 清单中有两个
default_图标
。确实不清楚问题出在哪里，所以请尝试删除不必要的信息并关注问题。请注意，弹出窗口有自己的devtools，您可以在其中调试代码并查看错误-在弹出窗口内单击鼠标右键，然后单击“检查”。我看到一些问题：1）从html中删除
onClick=
。2） chrome.browserAction.onClicked不执行任何操作，因为manifest.json中有
default\u弹出窗口
。3） 您可以删除整个后台脚本，而是从弹出窗口向内容脚本发送一条消息，直接询问值。4） 清单中有两个默认图标。 
dataTable.innerHTML += "<tr><td>Some</td><td>test</td><td>data</td></tr>"