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

我的问题是，当我运行代码时，我得到的不是一个 12 x 6 的表格，而是一段奇怪的 HTML 代码。

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

我不知道是什么原因导致了这个问题。 我该如何修复它？

- Nikola Stoyanov

---

预期输出是什么？ - brk

请勿使用.innerHTML += - 在此处您应该提供完整的HTML代码，如果您只是这样做 el.innerHTML += '<tr>'，这会通过HTML解析器进行处理，由于它是无效的，因此将被自动完成或丢弃，所以生成的HTML代码是无效的。最好直接创建DOM节点而不生成HTML代码。 - VLAZ

换句话说，您不能像在字符串或文本编辑器中那样插入部分元素到innerHTML中，然后稍后再关闭它们。 - charlietfl

这个回答解决了你的问题吗？在不破坏子元素事件监听器的情况下，是否可能追加innerHTML？ - VLAZ

Answer 1

一个更实用的方法是创建一个表格元素并使用 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>

- charlietfl

Answer 2

Try this :

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>

- Pranav Rustagi

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>

- Mister Jojo