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

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

<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循环迭代嵌套数组（否则称为多维数组）确实是一种标准做法，实际上没有理由不这样做。 t：

// 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>元素都创建一个class属性。您可以使用CSS 2.1后代选择器。无论嵌套多深，这都将匹配嵌套在td中的每个 #timetable元素：#timetable td { text-align: center; }

如何使用数组（香草JS）创建HTML表？

3 个答案: