Question

    <table id="table_1" border="1">
    <tr>
        <th>Name</th>

        <th>Email</th>
    </tr>
</table>



 var Classmates = ["Chris", "Jan", "Thomas", "Julia", "Tess", "Remco", "Kris", "Mark", "Rick", "Sara"];
var Emails = ["chris@gmail.com", "jan@gmail.com", "thomas@gmail.com", "julia@gmail.com", "tess@gmail.com", "remco@gmail.com", "kris@gmail.com", "mark@gmail.com", "rick@gmail.com", "sara@gmail.com"];


for (var i = 0; i < 11; i++) {
        document.write("<tr><td>" + i + "</td>");
        document.write("<td>" + Classmates[i], Emails[i] + "</td></tr>");
    }

我希望这个数组显示在一个简单的html表中，以便显示同学姓名旁边的电子邮件。

Answer 1

创建一个字符串变量并将html附加到它并为该变量执行document.write。

<div class="col-6-md" *ngFor="let level of config?.selectedLevels; let i = index">
      <div class="col-md-6" class="left-style" *ngIf="i%2 == 0">
          <a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)">
              <i class="fa fa-times">
              </i> 
              {{ level?.label || level }}
            </a>          
      </div>  
      <div class="col-md-6" class="right-style" *ngIf="i%2 != 0">
          <a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)">
              <i class="fa fa-times">
              </i> 
              {{ level?.label || level }}
            </a>           
      </div>  
</div>

Answer 2

需要做的改进很少

对于表格，您还需要编写表格标记
对于迭代，您可以简单地使用任一阵列的长度（通过删除硬编码来改进代码）
要以逗号分隔显示同学和电子邮件，您需要在逗号
数组的开始位于索引0，因此，要在document.write语句中将数字正确增加1，

＆＃13;

var Classmates = ["Chris", "Jan", "Thomas", "Julia", "Tess", "Remco", "Kris", "Mark", "Rick", "Sara"];
var Emails = ["chris@gmail.com", "jan@gmail.com", "thomas@gmail.com", "julia@gmail.com", "tess@gmail.com", "remco@gmail.com", "kris@gmail.com", "mark@gmail.com", "rick@gmail.com", "sara@gmail.com"];


document.write("<table border='1'>");
for (var i = 0; i < Classmates.length; i++) {
        document.write("<tr><td>" + (i+1) + "</td>");
        document.write("<td>" + Classmates[i] +", " + Emails[i] + "</td></tr>");
    }
    
document.write("</table>");

＆＃13;

Answer 3

使用document.createNode迭代每个数组并创建一个圆顶节点。使用appendChild附加tr＆amp; td到表

＆＃13;

var Classmates = ["Chris", "Jan", "Thomas", "Julia", "Tess", "Remco", "Kris", "Mark", "Rick", "Sara"];
var Emails = ["chris@gmail.com", "jan@gmail.com", "thomas@gmail.com", "julia@gmail.com", "tess@gmail.com", "remco@gmail.com", "kris@gmail.com", "mark@gmail.com", "rick@gmail.com", "sara@gmail.com"];

for (var i = 0; i < Classmates.length; i++) {
  let _tr = document.createElement('tr');
  let _tdClassmates = document.createElement('td');
  let _tdEmail = document.createElement('td');

  _tdClassmates.innerHTML = Classmates[i];
  _tdEmail.innerHTML = Emails[i];
  _tr.appendChild(_tdClassmates);
  _tr.appendChild(_tdEmail);
  document.getElementById('studentTable').appendChild(_tr);

}

＆＃13;

<table id='studentTable' border="1px solid black"></table>

＆＃13;

Answer 4

您可以在顶部定义所有变量并创建新元素并构建新表。后来将桌子贴在身上。

＆＃13;

{{1}}

＆＃13;

Answer 5

为表格提供ID。在我的情况下，我使用＆＃39; table_1＆＃39;。还包括jquery库。

for (var i = 0; i < 11; i++) {
$('#table_1').append('<tr>');
$('#table_1').append("<td>" + i + "</td>");
$('#table_1').append("<td>" + Classmates[i], Emails[i] + "</td>");
$('#table_1').append('</tr>');
    }

我想在HTML表中获取Javascript数组

5 个答案: