样式未添加到表格中

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>

1. 将document.write 更新为document.appendChild，如下所示：

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

table 必须是一个 DOM 元素，所以使用 let table = document.createElement('table'); 创建它，然后将 a 替换为 tableContent，如下所示：

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