如何使用 javascript for 循环创建包含多行的表？

Question

我想使用 javascript for 循环制作一个包含八行的颜色表。我用 php 和 mysql 做到了这一点，但我似乎无法弄清楚如何输出和标签来创建不同的行。到目前为止，这就是我所拥有的（表格有一个 id="colorpicker"）：

 <script type="text/javascript">

 var colors = ['000033', '000066', '000099', '0000CC', '0000FF', '003300',    '003333', '003366', '003399', '0033CC', '0033FF', '006600', '006633', '006666', '006699', '0066CC'];
 var i = 0;
 var len = colors.length;
 var colorpicker = "";
 var a = colors.indexOf('i');

 for (i = 0; i < len; i++) {

colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

document.getElementById("colorpicker").innerHTML = colorpicker;

</script>

我认为我需要做的是确定颜色的索引，然后使用模除法来确定索引是否 % 8 === 0。这是我尝试过的没有用的：

 var colors = ['000033', '000066', '000099', '0000CC', '0000FF', '003300',       '003333', '003366', '003399', '0033CC', '0033FF', '006600', '006633', '006666', '006699', '0066CC'];
  var i = 0;
  var len = colors.length;
  var colorpicker = "";
  var a = colors.indexOf('000033');
 var b = colors.indexOf('003399');

  for (i = 0; i < len; i++) {

    if(a % 8 === 0){

        // begin row
            colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>";
    }else if((b) % 8 === 0){
        // end row
            colorpicker += "<td style='color:#"+colors[i]+"'>"+colors[i] +"</td></tr>"
    }else{
        // midle of row
        colorpicker += "<td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  ";
    }


}

document.getElementById("colorpicker").innerHTML = colorpicker;

以上内容仍会为每种颜色生成一个新行。 任何帮助将不胜感激。

Answer 1

https://jsfiddle.net/ozhxzoph/

这就是你的意思吗？如果是这样，您需要将“颜色”更改为“背景颜色”。

改变这个：

colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

到这里：

colorpicker += "<tr><td style='background-color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

或者你的意思是你想要这样的东西？它的颜色网格在哪里？这里唯一的区别是这些是 8 列，而不是您似乎要求的 8 行。

https://jsfiddle.net/ozhxzoph/1/

双重编辑。这是使用 8 行而不是 8 列的解决方案。不过，这里的代码略有变化。是一个有趣的问题。 :)

https://jsfiddle.net/ozhxzoph/6/

希望这会有所帮助。