如何使用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/

希望這可以幫助。