即使使用完全正确的代码，该表在使用控制流的JavaScript迭代中也使用Set对齐 重要观察

编程问答 2022-10-27

问题描述

在构建数组，迭代和控制流之后，我在迭代内的控制流内使用Set()将元素替换为纯HTML中的表。输入完密码后，不显示任何内容。我没有在控制台中看到任何错误，并且整个代码中没有任何错误。

首先比较Markdowm /纯HTML：

## Available colours in Suru++ 25

<table style="margin-left: auto; margin-right: auto;">
  <thead>
    <tr>
      <th style="text-align:left">Name</th>
      <th style="text-align:center">Preview</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>90ssummer</th>
      <td>
        <img src="../images/suru-plus/folder-90ssummer-apps.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-apps">
        <img src="../images/suru-plus/folder-90ssummer-documents.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-documents">
        <img src="../images/suru-plus/folder-90ssummer-downloads.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-downloads">
        <img src="../images/suru-plus/folder-90ssummer-dropBox.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-dropBox">
        <img src="../images/suru-plus/folder-90ssummer-gitlab.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-gitlab">
        <img src="../images/suru-plus/folder-90ssummer-icons.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-icons">
        <img src="../images/suru-plus/folder-90ssummer-music.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-music">
        <img src="../images/suru-plus/folder-90ssummer-open.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-open">
        <img src="../images/suru-plus/folder-90ssummer.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer">
        <img src="../images/suru-plus/folder-90ssummer-pictures.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-pictures"> 
        <img src="../images/suru-plus/folder-90ssummer-visiting.svg?sanitize=true" height="48px" width="48px" alt="folder-90ssummer-visiting"> 
        <img src="../images/suru-plus/folder-90ssummer-desktop.svg?sanitize=true" height="48px" width="48px" alt="user-90ssummer-desktop">
      </td>
    </tr>
  </tbody>
</table>

对于ECMA6 JavaScript：

let titles = ["Adwaita++","Suru++","Suru++ Ubuntu"];
let styles = ["adwaita","suru","suru-plus"];
let categories = ["apps","desktop","documents","downloads","dropBox","gitlab","icons","music","open","pictures","visiting"];
let colours = ["90ssummer","adwaita","aubergine","aurora","berriez","black","blue","bluegrey","bordeaux","brown","canonical","cyan","cyberneon","darkblue","discodingo","fitdance","green","grey","indigo","magenta","manjaro","mint","orange","pink","purple","red","teal","vermillion","violet","white","yaru","yellow"];
let Set_html = new Set();

for (let a = 0; a < titles.length; a++) 
{
  const tt = titles[a];
  
  for (let i = 0; i < styles.length; i++) 
  {
    const style = styles[i];

    if (style == "adwaita") 
    {
      // Adwaita++
      Set_html.add(`<h1>${titles[0]}</h1>`)

      Set_html.add(`
      <table style="margin-left: auto; margin-right: auto;">
        <thead>
          <tr>
            <th style="text-align:left">Name</th>
            <th style="text-align:center">Preview</th>
          </tr>
        </thead>
        <tbody>`);
      
      let fake_colours = JSON.parse(JSON.stringify(colours))
      fake_colours.splice(fake_colours.indexOf('90ssummer'),1)
      fake_colours.splice(fake_colours.indexOf('aurora'),1)
      fake_colours.splice(fake_colours.indexOf('berriez'),1)
      fake_colours.splice(fake_colours.indexOf('black'),1)
      fake_colours.splice(fake_colours.indexOf('blue'),1)
      fake_colours.splice(fake_colours.indexOf('cyan'),1)
      fake_colours.splice(fake_colours.indexOf('cyberneon'),1)
      fake_colours.splice(fake_colours.indexOf('darkblue'),1)
      fake_colours.splice(fake_colours.indexOf('discodingo'),1)
      fake_colours.splice(fake_colours.indexOf('fitdance'),1)
      fake_colours.splice(fake_colours.indexOf('magenta'),1)
      fake_colours.splice(fake_colours.indexOf('pink'),1)
      fake_colours.splice(fake_colours.indexOf('teal'),1)
      fake_colours.splice(fake_colours.indexOf('vermillion'),1)
      fake_colours.splice(fake_colours.indexOf('violet'),1)

      let fake_categories = JSON.parse(JSON.stringify(categories))
      fake_categories.splice(fake_categories.indexOf('desktop'),1)
      fake_categories.splice(fake_categories.indexOf('icons'),1)

      for (let j = 0; j < fake_categories.length; j++) 
      {
        const category = fake_categories[j];

        for (let k = 0; k < fake_colours.length; k++) 
        {
          const colour = fake_colours[k];
          
          Set_html.add(`<tr>
                          <th>${colour}</th>
                          <td>
                            <img src="../images/${styles[0]}-plus/folder-${colour}-${category}.svg?sanitize=true" height="48px" width="48px" alt="folder-${colour}-${category}">
                          </td>
                        </tr>`);
        }
      }

      Set_html.add(`
        </tbody>
      </table>`);
    }
  }
}

let newArray = Array.from(Set_html).join('')
document.write(newArray)

应该是：https://jsfiddle.net/gusbemacbe/dkont71b/6/

您可以测试实时笔（JSfiddle的实时代码段最多只能显示100个图像）：

https://codepen.io/gusbemacbe/pen/OJNMLXZ

重要观察

  • 保持我喜欢的虚拟，简单和愚蠢的代码，即KISS；
  • 请勿使用Commonjs。我更喜欢ECMA 5、6和7，因此可以将其用于React和GatsbyJS。您可以根据需要自由制作精简版本。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

arraysarrayshtmliterationjavascript