如何基于多维数组动态构建符合预期格式的Bootstrap表格

AI 小北

2026-9-26

问题原因

原代码存在3个核心错误：

循环索引逻辑颠倒：外层循环遍历行（每个子数组对应一行），内层循环需要遍历当前子数组的所有元素（对应当前行的每一列），原代码内层固定循环2次且索引写反，导致取值完全错误
td标签属性错位：class="text-center"写到了<td>闭合标签的外侧，既导致属性不生效，也会破坏DOM结构
插入位置不规范：应该把生成的行插入到table的<tbody>节点内，而非直接插入到table根节点

修正后代码

JS部分

const mdArray = [
  ['name1', 'name2', 'name3', 'name4'],
  ['name5', 'name6', 'name7']
]

$(document).ready(function() {
  let tableHtml = "";
  // 外层循环遍历每个子数组，对应生成一行
  for (let rowIdx = 0; rowIdx < mdArray.length; rowIdx++) {
    const currentRow = mdArray[rowIdx];
    tableHtml += '<tr class="text-center">';
    // 内层循环遍历当前行的所有元素，对应生成列，自动适配子数组长度
    for (let colIdx = 0; colIdx < currentRow.length; colIdx++) {
      // class属性写到td标签内部
      tableHtml += `<td class="text-center">${currentRow[colIdx]}</td>`;
    }
    tableHtml += '</tr>';
  }
  // 插入到tbody节点中
  $('.table tbody').append(tableHtml);
});

HTML部分

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<body>
  <table class="table">
    <tbody>
    </tbody>
  </table>
</body>