gpt4 book ai didi

javascript - 如何使用 javascript for 循环创建多行表?

转载 作者:行者123 更新时间:2023-12-02 14:21:43 25 4
gpt4 key购买 nike

我想使用 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;

上面的代码仍然会为每种颜色生成一个新行。任何帮助将不胜感激。

最佳答案

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/

希望这有帮助。

关于javascript - 如何使用 javascript for 循环创建多行表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38597088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com