如何使用数组（vanilla JS）创建 HTML 表格？

Question

我有两个数组：

let arr1 = ['lion', 'tiger', 'elephant', 'snake', 'bear'];
let arr2 = ['mane', 'stripes', 'trunk', 'slither', 'claws'];

我目前正在做这样的事情：

var html = '<table id="timetable">';
    for (let i=0; i < arr1.length; i++) {
        html +='<td>' + arr1[i] + '</td>';  
    }
    html += '<tr/>';
    for (let i=0; i < arr2.length; i++) {
        html += '<td class="text-centre">'+ arr2[arr1[i].toLowerCase()]+ '</td>';   
    }
    html += '</table>';

列表的大小将始终相同，但我无法使用 仅一个 for 循环创建我想要的表结构。有什么帮助吗？

<table>
   <tr> 
   <td> lion </td>
   <td> tiger </td> 
   <td> elephant </td>
   <td> snake </td> 
   <td> bear </td>
 </tr>
 <tr>
   <td> mane </td>
   <td> stripes </td> 
   <td> trunk </td>
   <td> slither </td> 
   <td> claws </td>
 </tr>
</table>

Answer 1

你完全可以不用循环来做到这一点：

let arr1 = ['lion', 'tiger', 'elephant', 'snake', 'bear'];
let arr2 = ['mane', 'stripes', 'trunk', 'slither', 'claws'];
let times = {'mane':1, 'stripes':2, 'trunk':3, 'slither':4, 'claws':5};

const html = '<table id="timetable"><tr>'
        + '<td>' + arr1.join('</td><td>') + '</td>'
        + '</tr><tr>'
        + '<td>' + arr2.map(v => times[v.toLowerCase()]).join('</td><td>') + '</td>'
        + '</tr></table>';

console.log(html);

这是输出：

<table id="timetable">
  <tr>
    <td>lion</td>
    <td>tiger</td>
    <td>elephant</td>
    <td>snake</td>
    <td>bear</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

注意：我已经添加了times 和一些值......不知道那里有哪些真实数据，这只是一个示例。

好吧，我开始认为 times 和其他内容只是作为示例代码复制粘贴，您将用于您的任务。所以，这里是没有times的调整示例：

let arr1 = ['lion', 'tiger', 'elephant', 'snake', 'bear'];
let arr2 = ['mane', 'stripes', 'trunk', 'slither', 'claws'];

const html = '<table><tr>'
        + '<td>' + arr1.join('</td><td>') + '</td>'
        + '</tr><tr>'
        + '<td>' + arr2.join('</td><td>') + '</td>'
        + '</tr></table>';

console.log(html);

这是输出（实际输出是一个间距最小的单个字符串，这就是它在浏览器的 DOM 检查器中的样子）：

<table>
  <tr>
    <td>lion</td>
    <td>tiger</td>
    <td>elephant</td>
    <td>snake</td>
    <td>bear</td>
  </tr>
  <tr>
    <td>mane</td>
    <td>stripes</td>
    <td>trunk</td>
    <td>slither</td>
    <td>claws</td>
  </tr>
</table>

如果您只需要一个循环而不需要像.join() 或.map() 这样的肮脏技巧，这里是解决方案（输出与上面相同）：

let arr1 = ['lion', 'tiger', 'elephant', 'snake', 'bear'];
let arr2 = ['mane', 'stripes', 'trunk', 'slither', 'claws'];

let html1 = '<table><tr>';
let html2 = '</tr><tr>';

for (let i = 0; i < arr1.length; i++) {
    html1 += '<td>' + arr1[i] + '</td>';
    html2 += '<td>' + arr2[i] + '</td>';
}

const html = html1 + html2 + '</tr></table>';

console.log(html);

Answer 2

可能这个应该更清楚吗？

let arr1 = ['lion', 'tiger', 'elephant', 'snake', 'bear'] 
let arr2 = ['mane', 'stripes', 'trunk', 'slither', 'claws'] 

createTimeTable( arr1, arr2 )

function createTimeTable()
{
  let TimeTable = document.createElement('table')
  TimeTable.id = 'timetable'

  document.body.appendChild(TimeTable)

  for (arr of arguments) {
    let row = TimeTable.insertRow(-1)
    let c = 0
    for(cell of arr) row.insertCell(c++).textContent = cell
  }
}

table { border-collapse: collapse}
td    { border: 1px solid grey; padding: .2em .8em }

Answer 3

for 循环是包含 3 条语句的代码块：第一个初始化循环以供使用，第二个在每次循环迭代之前计算要表达的条件，第三个语句与第二个语句一样长条件计算为true。

所有 3 条语句都是可选的，只要您包含分号以让 Javascript 解释器知道 for 循环的定义逻辑在代码中的其他位置。

所以从技术上讲，您可以创建一个 for 循环，省略所有 3 条语句，如下所示：

var i = 0;

for (;;) { 
    if (i > 3) { break; } console.log(i);
    i++;
}

这可以用来创建非常复杂的循环。不过要小心，因为如果您的代码逻辑没有正确定义，您的循环将无限期地运行。

当以编程方式创建表时，使用嵌套的for 循环迭代嵌套数组（也称为多维数组）确实是标准做法，您没有理由不这样做：

// Create a nested array. Access individual values like multi[...][...]
var multi = [ 
    ['lion', 'tiger', 'elephant', 'snake', 'bear'], 
    ['mane', 'stripes', 'trunk', 'slither', 'claws']
];
var arr1 = multi[0], arr2 = multi[1];

var table = '<table id = "timetable">';

for (var i = 0; i < multi.length; i++) {
    table += '<tr>';
    for (var j = 0; j < multi[i].length; j++) {
      table += '<td class = "text-centre">' + multi[i][j] + '</td>';
    }
    table += '</tr>';
}
table += '</table>';
document.body.innerHTML = table;

但是，如果你真的真的想要，你可以这样做，只使用一个for循环：

// as you can see, this is way more convoluted and prone to error

// Create a nested array. Access individual values like multi[...][...]
var multi = [ 
    ['lion', 'tiger', 'elephant', 'snake', 'bear'], 
    ['mane', 'stripes', 'trunk', 'slither', 'claws']
];
var table = '<table id = "timetable">';

for (var j = 0, k = 0; j < multi.length; ) { // third statement omitted. will run until j = 2.

    // add a tr at the beginning and end of the table row
    if (k === 0) { table += '<tr>' }

    table += '<td class = "text-centre">' + multi[j][k] + '</td>';

    if (k === (multi[j].length-1)) { 
        k = 0; // reset k to zero for iteration
        table += '</tr>';
        j++; // increment j;
    } else {
        k++;
    }
}
table += '</table>';
document.body.innerHTML = table;

For 循环引用：here 和 here。

P.S.，您实际上不需要为每个 <td> 元素创建一个类属性。您可以使用 CSS 2.1 后代选择器。这将匹配 每个 td 嵌套在 #timetable 中的元素，无论其深度如何：#timetable td { text-align: center; }