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/

这是你的意思吗？如果是这样，你需要改变颜色＆＃34; to＆＃34; background-color＆＃34;。

改变这个：

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/

Double Edit。这是8行而不是8列的解决方案。这里的代码稍微改变了一些。这是一个有趣的问题。：）

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

希望这有帮助。

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

1 个答案: