如何将逗号分隔的双列数据拆分并生成目标HTML表格？

没问题，我帮你把这些逗号分隔的数据转换成对应的HTML表格。先看最终生成的静态HTML代码，直接就能用：

<table>
  <thead>
    <tr>
      <th>description</th>
      <th>price</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一组拆分后的数据 -->
    <tr>
      <td>A</td>
      <td>£1</td>
    </tr>
    <tr>
      <td>B</td>
      <td>£4</td>
    </tr>
    <tr>
      <td>C</td>
      <td>£7</td>
    </tr>
    <tr>
      <td>D</td>
      <td>£1.50</td>
    </tr>
    <!-- 第二组拆分后的数据 -->
    <tr>
      <td>D</td>
      <td>£4</td>
    </tr>
    <tr>
      <td>F</td>
      <td>£8</td>
    </tr>
    <tr>
      <td>A</td>
      <td>£9</td>
    </tr>
    <tr>
      <td>G</td>
      <td>£10</td>
    </tr>
  </tbody>
</table>

如果你的数据是动态获取的，不想手动写每一行，可以用JavaScript自动处理，代码逻辑如下：

// 原始的逗号分隔数据
const rawData = [
  { descStr: "A,B,C,D", priceStr: "£1,£4,£7,£1.50" },
  { descStr: "D,F,A,G", priceStr: "£4,£8,£9,£10" }
];

// 创建表格结构
const table = document.createElement('table');
// 表头
const headerRow = document.createElement('tr');
headerRow.innerHTML = '<th>description</th><th>price</th>';
table.appendChild(headerRow);

// 处理每一组数据
rawData.forEach(group => {
  // 把逗号分隔的字符串拆分成数组
  const descs = group.descStr.split(',');
  const prices = group.priceStr.split(',');
  
  // 遍历数组生成每行
  descs.forEach((desc, idx) => {
    const row = document.createElement('tr');
    row.innerHTML = `<td>${desc}</td><td>${prices[idx]}</td>`;
    table.appendChild(row);
  });
});

// 把表格添加到页面上
document.body.appendChild(table);

这段JS会自动帮你把每组的描述和价格一一对应，生成完整的表格，适合数据量较大或者需要动态更新的场景。

内容的提问来源于stack exchange，提问作者user3580480