如何从数组中为数据表的同一列中的每一行提供不同的图标

<table id="dataTable">
  <tr><th>Name</th><th>Icon</th></tr>
  <!-- 数据行将通过JavaScript动态添加 -->
</table>

// 假设这是你的数据数组，每个对象包含一个name和一个icon属性
const data = [
  { name: 'Alice', icon: 'fa-user' },
  { name: 'Bob', icon: 'fa-cog' },
  { name: 'Charlie', icon: 'fa-home' }
];

// 获取表格的引用
const table = document.getElementById('dataTable');

// 遍历数据数组，为每一行创建一个新的<tr>元素
data.forEach(item => {
  // 创建新的行
  const row = document.createElement('tr');
  
  // 创建并添加name单元格
  const nameCell = document.createElement('td');
  nameCell.textContent = item.name;
  row.appendChild(nameCell);
  
  // 创建并添加icon单元格
  const iconCell = document.createElement('td');
  // 使用Font Awesome图标作为示例
  const iconElement = document.createElement('i');
  iconElement.className = `fas ${item.icon}`; // 注意这里的fas是Font Awesome的前缀
  iconCell.appendChild(iconElement);
  row.appendChild(iconCell);
  
  // 将新行添加到表格中
  table.appendChild(row);
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">