如何在HTML表格不同列中展示两组对应数组数据？

嘿，这事儿其实没那么复杂，我给你几种不同场景下的实现方案，你挑适合自己的来：

1. 纯静态HTML写法 #

如果你的数据是固定死的，直接写个表格就行，结构一目了然：

<table border="1">
  <thead>
    <tr>
      <th>@data_a</th>
      <th>@data_b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a(1)</td>
      <td>b(1)</td>
    </tr>
    <tr>
      <td>a(2)</td>
      <td>b(2)</td>
    </tr>
    <tr>
      <td>a(3)</td>
      <td>b(3)</td>
    </tr>
    <tr>
      <td>a(4)</td>
      <td>b(4)</td>
    </tr>
    <tr>
      <td>a(5)</td>
      <td>b(5)</td>
    </tr>
  </tbody>
</table>

加个border="1"是为了让表格边框显形，方便你看效果，之后完全可以用CSS自定义更美观的样式。

2. 原生JS动态生成（适合数据不固定的情况） #

如果数据是从后端接口或者其他地方动态拿到的数组，用JS循环生成表格内容更高效：

<table id="dataTable" border="1">
  <thead>
    <tr>
      <th>@data_a</th>
      <th>@data_b</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
// 假设这是你拿到的两组数据数组
const data_a = ['a(1)', 'a(2)', 'a(3)', 'a(4)', 'a(5)'];
const data_b = ['b(1)', 'b(2)', 'b(3)', 'b(4)', 'b(5)'];

const tbody = document.querySelector('#dataTable tbody');

// 循环遍历数组，生成每一行数据
for (let i = 0; i < data_a.length; i++) {
  const row = document.createElement('tr');
  
  // 生成第一列单元格
  const cellA = document.createElement('td');
  cellA.textContent = data_a[i];
  row.appendChild(cellA);
  
  // 生成第二列单元格
  const cellB = document.createElement('td');
  cellB.textContent = data_b[i];
  row.appendChild(cellB);
  
  tbody.appendChild(row);
}
</script>

这里要注意哦，最好先判断两组数据的长度是否一致，不然会出现对应不上的情况，比如加个if (data_a.length !== data_b.length)的时候提示数据不匹配。

3. 前端框架示例（以Vue 3为例） #

要是你用Vue这类框架，写起来就更简洁了：

<template>
  <table border="1">
    <thead>
      <tr>
        <th>@data_a</th>
        <th>@data_b</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(itemA, index) in data_a" :key="index">
        <td>{{ itemA }}</td>
        <td>{{ data_b[index] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue';

// 定义两组响应式数据
const data_a = ref(['a(1)', 'a(2)', 'a(3)', 'a(4)', 'a(5)']);
const data_b = ref(['b(1)', 'b(2)', 'b(3)', 'b(4)', 'b(5)']);
</script>

React的话思路差不多，用map循环渲染每一行就搞定了。

核心逻辑就是利用表格的行（<tr>）和单元格（<td>），把两组数据的对应索引项放在同一行的两个单元格里，这样就能完美实现你要的两列对应展示效果啦～

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