樣式未添加到表格中

Question

我正在嘗試構建一個電子應用程序，它獲取一個 csv 表並將其顯示為一個 csv 格式的 html 表

我嘗試使用下面的代碼，但樣式沒有應用於電子窗口中的表格

它不會拋出任何錯誤只是顯示沒有樣式的表格

 const csv = `id,species,name 0,Panthera leo,Lion 1,Canis Lupus,Wolf 2,Capra hircus,Goat 3,Panthera pardus,Leopard 4,Equus zebra,Zebra`; function fetchData() { return new Promise(res => setTimeout(() => res(csv), 1000)); } getData(); async function getData() { //const response = await fetch('new.csv'); //const data = await response.text(); const data = await fetchData(); let a; a = data.slice(15); a = a.replaceAll(',', '</td><td>'); a = a.replaceAll('\\n', '</tr><tr><td>'); let start = "<table><tr><th>id</th><th>species</th><th>name</th><tr><td></tr>"; let end = "</td></tr></table>"; let semi = start.concat('', a); a = semi.concat('', end); a = a.replaceAll('<tr><td></tr></tr>', ''); a = a.replaceAll('</tr>', '</td></tr>'); a = a.replaceAll('</th></td></tr>', '</th></tr>'); a = a.replaceAll('</td></td>', '</td>'); document.write(a); }

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { `enter code here` border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

Answer 1

嘗試這個：

1. 給body添加一個div，帶有一個test類

<div class="test"></div>

2. 更新document.write為document.appendChild像這樣：

document.querySelector('.test').appendChild(table);

table必須是一個 DOM 元素，所以用let table = document.createElement('table');創建它let table = document.createElement('table'); 然后用tableContent替換a ，如下所示：

const csv = `id,species,name
0,Panthera leo,Lion
1,Canis Lupus,Wolf
2,Capra hircus,Goat
3,Panthera pardus,Leopard
4,Equus zebra,Zebra`;

getData();
function getData() {
  //const response = await fetch('new.csv');
  //const data = await response.text();
  const data = csv;
  let tableContent;
  tableContent = data.slice(15);
  tableContent = tableContent.replace(/,/g, '</td><td>');
  tableContent = tableContent.replace(/\n/g, '</tr><tr><td>');
  let start = "<tr><th>id</th><th>species</th><th>name</th><tr><td></tr>";
  let end = "</td></tr>";
  let semi = start.concat('', tableContent);
  tableContent = semi.concat('', end);
  tableContent = tableContent.replace(/<tr><td><\/tr><\/tr>/g, '');
  tableContent = tableContent.replace(/<\/tr>/g, '</td></tr>');
  tableContent = tableContent.replace(/<\/th><\/td><\/tr>'/g, '</th></tr>');
  tableContent = tableContent.replace(/<\/td><\/td>/g, '</td>');
  let table = document.createElement('table');
  table.innerHTML = tableContent;
  document.querySelector('.test').appendChild(table);
}