如何創建一個有很多圓圈的表格，以便我可以更改任何圓圈的背景顏色？

Question

這就是我要的：

 .square{ float:left; border:1px solid gray; margin-left:5px; margin-bottom:5px; height: 50px; width: 50px; background-color: #555; border-radius: 50%; }

 <script> for(var i = 0; i < 5; i++){ for(var j = 0; j < 10; j++){ document.write("<div class='square'></div>"); } document.write("<div style='clear:both'></div>"); } </script>

我嘗試改變顏色，但這不是我想要的 position。

Answer 1

你可以用 CSS 來做這個檢查這個代碼我給你一些例子你怎么做

 .square{ float:left; border:1px solid gray; margin-left:5px; margin-bottom:5px; height: 50px; width: 50px; background-color: #555; border-radius: 50%; } /* if you want to change 5th circle */.square:nth-child(5){ /* Here you want to add nth-child(5) */ border:1px solid red; background-color: transparent; } /* if you want to change 8th circle */.square:nth-child(8){ /* Here you want to add nth-child(8) */ border:1px solid green; background-color: blue; }

 <!-- Heare I have 10 Div with class Name SQUARE --> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>

Answer 2

您可以添加另一個具有所需樣式的 class 並將該 class 添加到您想要的圓圈中

 var emptyRow = 2 var emptyCol = 2 for(var i = 0; i < 10; i++){ for(var j = 0; j < 10; j++){ if (i < emptyRow && j < emptyCol) { document.write("<div class='empty-square'></div>"); } else { document.write("<div class='square'></div>"); } } document.write("<div style='clear:both'></div>"); }

 .square{ float:left; border:1px solid gray; margin-left:5px; margin-bottom:5px; height: 30px; width: 30px; background-color: #555; border-radius: 50%; }.empty-square{ float:left; border:1px solid gray; margin-left:5px; margin-bottom:5px; height: 30px; width: 30px; background-color: #fff; border-radius: 50%; }