使用Javascript将CSV转换为HTML表。使用CSV中的列添加CSS类

// 假设CSV数据存储在一个名为data的数组中
const data = [
  { Name: 'John', Age: '25', Gender: 'Male' },
  { Name: 'Jane', Age: '30', Gender: 'Female' },
  { Name: 'Bob', Age: '35', Gender: 'Male' }
];

// 创建表格元素
const table = document.createElement('table');

// 创建表头行
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');

// 遍历第一行数据，作为表头
Object.keys(data[0]).forEach(column => {
  const th = document.createElement('th');
  th.textContent = column;
  headerRow.appendChild(th);
});

thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表格内容
const tbody = document.createElement('tbody');

data.forEach(rowData => {
  const row = document.createElement('tr');

  // 遍历每一列数据
  Object.entries(rowData).forEach(([column, value]) => {
    const cell = document.createElement('td');
    cell.textContent = value;

    // 根据列名添加CSS类
    cell.classList.add(column);

    row.appendChild(cell);
  });

  tbody.appendChild(row);
});

table.appendChild(tbody);

// 将表格添加到页面中的某个元素
const container = document.getElementById('table-container');
container.appendChild(table);