Javascript循环遍历列表不起作用

Question

我正在尝试制作一个表情包的表格，并制作了一个foreach循环来制作一个表格：

emojis = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']
var i = 0
document.getElementById("emojiTable").innerHTML += "<table><tr>"
emojis.forEach(emoji => {
  if(i == 12) {
    document.getElementById("emojiTable").innerHTML += "</tr><tr>"
    i = 0
  }
  document.getElementById("emojiTable").innerHTML += "<td>"+emoji+"</td>"
  i ++
  })
  document.getElementById("emojiBAR").innerHTML += "</table>"

我的问题是，当我运行代码而不是得到一个12x6的表格时，我得到了这段奇怪的HTML：

<table><tbody><tr></tr></tbody></table>?????????????????????????????????????????????????????????????????????⚡✊✋✌✍❤⭐

我不知道这是什么原因。我该如何解决这个问题呢？

Answer 1

试试这个：

​

emojis = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

var i = 0
var table = document.getElementById("emojiTable");
var str = "<table><tr>";

emojis.forEach(emoji => {
  if (i == 12) {
    str += "</tr><tr>";
    i = 0
  }
  str += "<td>" + emoji + "</td>";
  i++
})

table.innerHTML = str;
//document.getElementById("emojiBAR").innerHTML += "</table>"

<div id="emojiTable"> </div>

​

Answer 2

一种更实用的方法，创建一个表元素并使用Table.insertRow()和Row.insertCell()

​

emojis = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

const table = document.createElement('table');
let row;

emojis.forEach((emoji, i) => {
  if (i % 12 === 0) {
    row = table.insertRow();
  }
   row.insertCell().innerHTML = emoji;  
})

document.getElementById("emojiTable").append(table)

<div id="emojiTable"></div>

​

Answer 3

你想这样吗?？

​

const emojis = 
  [ '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'
  , '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'
  , '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'
  , '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'
  , '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'
  , '?', '?', '?', '?', '?', '?', '?', '?', '?', '⚡', '✊', '✋'
  , '✌', '✍', '❤', '⭐']
  ;
(function() // IIFE generateTable
  {
  let eTable = document.createElement('table')
    , cRow   = null

  emojis.forEach( (emoji,indx)=>
    {
    if ( !(indx % 12)) cRow = eTable.insertRow()
    cRow.insertCell().innerHTML = emoji
    })
  document.getElementById('emojiTable').appendChild(eTable)
  })()

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

<div id="emojiTable"></div>

​