javascript - 显示 JavaScript 变量数组

Question

我有一个变量数组，它会根据用户输入进行表过滤。我在 console.log 中获取数组结果，现在我想以 HTML 形式显示它。

我尝试过:document.getElementById("Tableau").innerHTML = res.toString();

其中“res”是数组结果，但当我想要一个稍微好一点的简单 HTML 表格时，它只显示用逗号分隔的元素。

var res = station.filter( i => i[0] >= gval1 && i[0] <= gval2 );
document.getElementById("Tableau").innerHTML = res.toString();
console.log(res);

这是 HTML 表格:

<table>
<thead>
    <tr>
        <th> Id </th>
        <th> Station </th>
        <th> Line </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>   
</tbody>
</table>

这是我的 JavaScript 表格:

var station = [
[0,'JAMAA EL FNA','L1'],
[1,'KOUTOUBIA','L1'],
[2,'HOTEL DE VILLE','L1'],
[3,'R.P BERDII','L1'],
[4,'GRAND POSTE','L1'],
[5,'CAREE EDEN','L1'],
[6,'PL ABDELMOUMEN','L1'],
[7,'PLACE D ARMES','L1'],
[8,'FST','L1'],
[9,'SEMIRAMIS','L1'],
[10,'DR KUDIA','L1'],
[11,'MCDO','L1'],
[12,'CAFE AMINE','L1'],
[13,'FAC SEMLALIA','L1'],
[14,'ROUIDATE','L1'],
[15,'CLUB MINISTRE JUSTICE','L1'],
[16,'BEN TBIB','L1'],
[17,'ASWAK SALAM','L1'],
[18,'BAB DOUKALA','L1'],
[19,'JAMAA EL FNA','L2'],
[20,'KOUTOUBIA','L2'],
[21,'PH KOUTOUBIA','L2'],
[22,'RIAD SHEBA','L2'],
[23,'DAR LBACHA','L2'],
[24,'RIAD LAAROUSSE','L2'],
[25,'BAB TAGHZOUT','L2'],
[26,'BIN LMAASAR','L2'],
[27,'ARSET EL MELLAK','L2'],
[28,'HOPITAL ANTAKI','L2'],
[29,'AVENUE ANTAKI','L2'],
[30,'QCHICH','L2'],
[31,'RUE BAB KHACHICH','L2'],
[32,'AIN ITTI','L2']];

如何循环遍历数组以将其显示在表格上？

Answer 1

使用.join()构建您的 html并将数组元素放入 td 中标签:

const res = ['a', 'b', 'c'];
const cells = '<tr><td>' + res.join('</td><td>') + '</td></tr>' ;
document.getElementById("Tableau").innerHTML = cells;

td{
  border: 1px solid;
  padding: 5px;
}

<table id="Tableau">

</table>

编辑: 根据编辑后的问题，您需要一个循环来遍历数组 eleemnts 并将每一行包装在 <tr> 中并将结果附加到 <tbody> ，使用.map()为此:

var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1']
]

var rows = station.map(e => {
  return '<tr><td>' + e.join('</td><td>') + '</td></tr>';
})

document.getElementById("tBody").innerHTML = rows.join(' ');

th,
td {
  border: 1px solid;
  padding: 5px;
}

<table id="Tableau">
  <thead>
    <tr>
      <th> Id </th>
      <th> Station </th>
      <th> Line </th>
    </tr>
  </thead>
  <tbody id="tBody">
  </tbody>
</table>