时间戳

首页 > 解决方案 > Javascript循环遍历列表不起作用

javascript - Javascript循环遍历列表不起作用

问题描述

我正在尝试制作一张表情符号表并制作了一个 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>⚡✊✋✌✍❤⭐

我不知道是什么原因造成的。我怎样才能解决这个问题？

标签： javascriptloops

解决方案

一种更实用的方法，它创建一个表格元素并使用Table.insertRow()and 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>

推荐阅读