Question

我有一个可变数组，该数组根据用户输入进行表过滤。我现在想以HTML格式显示console.log中的数组结果。

我尝试过：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>

编辑： 根据已编辑的问题，您将需要一个循环来遍历数组元素并将每行包装在<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>

Answer 2

使用JavaScript渲染HTML很有趣

由于您有一个列表，因此需要使定界符表成为类，我建议在表项之间插入一个<br />标记。像这样：

Tableau.innerHTML = res.join('<br />')

Answer 3

如塔基（Taki）所述，您可以使用 res.join() 将数组秘密转换为字符串。

谈到样式，以下内容可能会有所帮助。

假设您有一个如下数组，

var statements=['1st statement','2nd statement','3rd statement','4th statement','5th statement'];
    console.log(statements.join('-'));

将产生以下内容

1st statement-2nd statement-3rd statement-4th statement-5th statement

并说您要执行以下操作

var styledRes ='<tr class="your-class-name"><td>' + statements.join('</td><td>')+' </td></tr>'

会产量

<tr class="your-class-name">
 <td>1st statement</td>
 <td>2nd statement</td>
 <td>3rd statement</td>
 <td>4th statement</td>
 <td>5th statement</td>
</tr>

您可以在css文件中进行样式定义，它们将在此处应用。

完成时

document.getElementById("Tableau").innerHTML = styledRes;

您会在屏幕上看到类似以下的内容

<table>
   <tr class="your-class-name">
     <td>1st statement</td>
     <td>2nd statement</td>
     <td>3rd statement</td>
     <td>4th statement</td>
     <td>5th statement</td>
    </tr>
</table>

并假设您具有如下定义的样式，

.your-class-name td{

border：2px纯绿色； }

您将能够在屏幕上看到类似以下内容

.your-class-name td{
 border:2px solid green;
}

<table>
       <tr class="your-class-name">
         <td>1st statement</td>
         <td>2nd statement</td>
         <td>3rd statement</td>
         <td>4th statement</td>
         <td>5th statement</td>
        </tr>
    </table>

这是您要寻找的吗？

显示一个JavaScript变量数组

3 个答案:

使用JavaScript渲染HTML很有趣