Javascript数组到表

在JavaScript中，数组可以表示表格数据。在这篇文章里，我们将会介绍如何将JavaScript数组转换为表格的格式。

创建数组

下面是一个具有三行四列的二维数组的例子：

let myArray = [
  ["First Name", "Last Name", "Age", "Gender"],
  ["John", "Doe", 25, "Male"],
  ["Jane", "Doe", 30, "Female"],
  ["Bob", "Smith", 45, "Male"],
];

转换为HTML表格

通过JavaScript动态地创建一个HTML表格的最简单的方法就是遍历数组，并将每一个内层数组的数据添加到表格中。下面是一个示例的实现：

function arrayToTable(myArray) {
  // 创建一个table元素
  let table = document.createElement("table");

  // 遍历数组的每一行
  for (let i = 0; i < myArray.length; i++) {
    // 创建一个tr元素
    let row = document.createElement("tr");

    // 遍历当前行的每一列
    for (let j = 0; j < myArray[i].length; j++) {
      // 创建一个td元素，并将当前列的数据添加到td元素中
      let cell = document.createElement("td");
      let cellText = document.createTextNode(myArray[i][j]);
      cell.appendChild(cellText);

      // 将td元素添加到tr元素中
      row.appendChild(cell);
    }

    // 将tr元素添加到表格中
    table.appendChild(row);
  }

  // 返回表格元素
  return table;
}

转换为Markdown表格

为了将JavaScript数组转换为Markdown表格，我们需要使用一些Markdown文本格式化的技巧。下面是一个示例的实现：

function arrayToMarkdown(myArray) {
  // 用一组水平线创建表头
  let header = " | " + "-|".repeat(myArray[0].length) + "\n";
  
  // 创建表头的第一行
  let headerRow = "| " + myArray[0].join(" | ") + " |\n";
  
  // 创建表头的第二行
  let headerLine = header.slice(0, header.length - 2) + "|:\n";

  let rows = "";

  // 遍历数组的每一行
  for (let i = 1; i < myArray.length; i++) {
    // 创建当前行的数据
    let row = "| " + myArray[i].join(" | ") + " |\n";

    // 添加当前行的数据到表格中
    rows += row;
  }

  // 返回完整的Markdown表格
  return headerRow + headerLine + rows;
}

使用示例：

let myArray = [
  ["First Name", "Last Name", "Age", "Gender"],
  ["John", "Doe", 25, "Male"],
  ["Jane", "Doe", 30, "Female"],
  ["Bob", "Smith", 45, "Male"],
];

console.log(arrayToTable(myArray));
console.log(arrayToMarkdown(myArray));

输出结果：

<table>
  <tbody>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Age</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td>30</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Smith</td>
      <td>45</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

| First Name | Last Name | Age | Gender |
| ---------- | ---------| ---:| ------ |
| John       | Doe      |   25| Male   |
| Jane       | Doe      |   30| Female |
| Bob        | Smith    |   45| Male   |