bootstrap 表的多维数组

Question

我有一个多维数组，每个子数组都包含动态元素。我试图做的是通过读取数组构造一个 bootstrap table 。更好地解释 table 格式：如果我的多维数组是 mdArray = [[name1, name2, name3, name4], [name5, name6, name7]] 我想用 mdArray[0], mdArray[1], mdArray[2], mdArray[3] 创建 4 列的 table，然后在检测到下一个子数组时用列 mdArray[4], mdArray[5], mdArray[6] 创建一个新行。我试过的是下面。我怎样才能做到这一点？任何帮助表示赞赏。提前致谢？

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

$('.table').ready(
  function() {
    console.log('table loaded');
    var theTable = "";
    for (var j = 0; j < mdArray.length; j++) {
      theTable += '<tr class="text-center">';
      for (var k = 0; k < 2; k++) {
        theTable += '<td> class="text-center"' + mdArray[k][j] + '</td>';
      }
      theTable += '</tr>';
    }

    $('.table').append(theTable);
    //expected name1 name2 name3 name4 
    //next row
    //name5 name6 name7
  });

<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 table">
    <tbody>

    </tbody>
  </table>

</body>

因为有人提出了视觉表示：

Answer 1

这是你要找的吗

<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <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>
</head>

<body>
  <!-- <button onclick="eventEmitArray()">Insert the array</button> -->
  <table class="table">
    <tbody></tbody>
  </table>
</body>
<script>
  let mdArray = [
    ["name1", "name2", "name3", "name4"],
    ["name5", "name6", "name7"],
  ];
  $(".table").ready(function() {
    console.log("table loaded");
    var theTable = "";
    for (var j = 0; j < mdArray.length; j++) {
      theTable += '<tr class="text-center">';
      for (var k = 0; k < mdArray[j].length; k++) {
        theTable += '<td class="text-center">' + mdArray[j][k] + "</td>";
      }
      theTable += "</tr>";
    }

    $(".table").append(theTable);
  });
</script>

</html>

Answer 2

您可以使用 forEach 循环，您无需担心列数和处理数组索引

$('.table').ready(function() {
   var theTable = "";
   mdArray.forEach((names) => {
        theTable += '<tr class="text-center">'
        names.forEach((name) => {
          theTable += `<td class="text-center">${name}</td>`;
        })
        theTable += '</tr>'
      }
   );
   $('.table').append(theTable);
  });

bootstrap 表的多维数组

Multidimensional Array to bootstrap tables

html

javascript

bootstrap-4