我想在 HTML 表中获取 Javascript 数组 [关闭]

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。

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

Answer 2

需要改进的地方很少

1. table也需要写table标签
2. 对于迭代，您可以简单地使用任一数组的长度（通过删除硬编码来改进代码）
3. 要将同学和电子邮件显示为逗号分隔，您需要将逗号放在引号中
4. 数组的开始在索引 0 处，因此，要获得正确的数字，请在 document.write 语句中将其增加 1

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>");

Answer 3

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

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);

}

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

Answer 4

您可以在顶部定义所有变量并创建新元素并构建新表。稍后将表格附加到正文中。

var classmates = ["Chris", "Jan", "Thomas", "Julia", "Tess", "Remco", "Kris", "Mark", "Rick", "Sara"],
    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"],
    table = document.createElement('table'),
    tr = document.createElement('tr'),
    td, th,
    i;

th = document.createElement('th');
th.appendChild(document.createTextNode('Name'));
tr.appendChild(th);

th = document.createElement('th');
th.appendChild(document.createTextNode('e-Mail'));
tr.appendChild(th);

table.appendChild(tr);

for (i = 0; i < 10; i++) {
    tr = document.createElement('tr');

    td = document.createElement('td');
    td.appendChild(document.createTextNode(classmates[i]));
    tr.appendChild(td);

    td = document.createElement('td');
    td.appendChild(document.createTextNode(emails[i]));
    tr.appendChild(td);

    table.appendChild(tr);
}

document.body.appendChild(table);

Answer 5

给表格一个ID。就我而言，我使用'table_1'。 还包括 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>');
    }