javascript - 如何使用 JavaScript 创建和填充 HTML 表格

Question

arrayName = ["name1", "name2", "name3"];
arrayAge = [21, 18, 19];
arrayColor = ["green", "blue", "yellow"];
arrayMonth = [1, 6, 4];

<div class='col-xs-12 col-md-3 last'>
  <div id='colunaConversaoConsultor' class="col-md-12">
    <div id="linhaConversaoConsultorTabela" class="row clearfix">
    </div>
  </div>
</div>

我有 4 个 JavaScript 数组，其中一个对应于一列：

arrayName = ["name1", "name2", "name3"];
arrayAge = [21, 18, 19];
arrayColor = ["green", "blue", "yellow"];
arrayMonth = [1, 6, 4];

我有一个这样的html元素：

<div class='col-xs-12 col-md-3 last'>
   <div class="col-md-12">
      <div id="table" class="row clearfix">
      </div>
   </div>
</div>

我需要将这些数组的元素放入我的 html 表格中，如下所示：

|  Name | Age | Color | Month |
| name1 | 21  | green |   1   |
| name2 | 18  | blue  |   6   |
| name3 | 19  |yellow |   4   |

我正在尝试使用getElementById("#table")一些array.ForEach( )，但我遇到了麻烦，因为我的数组对应于列而不是行

标签： javascripthtmlhtml-table

Answer 1

这是将表格插入htmlvia的唯一方法javascript。只需遍历数组并使用所需数据创建 html 元素。

const arrayName = ["name1", "name2", "name3"];
const arrayAge = [21, 18, 19];
const arrayColor = ["green", "blue", "yellow"];
const arrayMonth = [1, 6, 4];

const $table = document.getElementById('table');
$table.insertAdjacentHTML('afterbegin', createTable());

function createTableRow(data) {
  const arr = data.map(e => {
    return `<td>${e}</td>`;
  });
   
 return `<tr>${arr.join('')}</tr>`;
}

function createTable() {
  const tableRows = arrayName.map((name, i) => {
    return createTableRow([name, arrayAge[i], arrayColor[i], arrayMonth[i]]);
  });
  
  return `
    <table>
      <thead>
        <tr>
          <td>Name</td>
          <td>Age</td>
          <td>Color</td>
          <td>Month</td>
        </tr>
      </thead>
      <tbody>
        ${tableRows.join('')}
      </tbody>
    </table>
  `;  
}

table,
table tr,
table td {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
}

<div id="table" class="row clearfix"></div>