在js/html/css中制作单元格的可点击网格

Question

我想为类似于tic tac toe的游戏创建一个网格，除非您希望获得连续5个而不是3个，这意味着我需要9个以上的单元格为电网。我需要一个类似纸张的网格，网格中的每个单元格都是可点击的，并在点击时变为某种颜色。每个单元需要有一个单独的标签，因为稍后当程序需要确定玩家是否连续获得五个时，我将需要它。例如，第一行的第二个单元格是单元格[2] [1]。

我有什么至今：

for (var x=0;x <gridWidth; x=x+10){ //each cell is 10px by 10px 
    for (var y=0; y<gridHeight; y=y+10){ 
     return Cell[x][y]; //I am not sure how to print out a cell at each of these 'coordinates'. 
    }; 
}; 

Answer 1

编辑：我已经修改了代码娄dinamically产生的网格。

---

注意：请注意，这个答案用了jQuery。

---

首先，您可以创建一个函数来生成网格。它会循环行和列，正如你试图做的那样，但它会返回一个正确的HTML代码的字符串。您将使用jQuery将该HTML字符串作为HTML元素追加到文档中。

顺便说一句，你不应该尝试设置JavaScript的单元格的大小，因为你有CSS。

当用户点击单元格时，可以使用jQuery .index()来检索单元格的索引，并从中检索它所属的行和列。

最后，要更改单元格的颜色，您只需编辑它的background-color属性。

像这样的东西可以帮助你开始：

function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
     grid += "<tr>"; 
 
     for (col = 1; col <= cols; col++) {  
 
      grid += "<td></td>"; 
 
     } 
 
     grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(5, 5)); 
 

 
$("td").click(function() { 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/5) + 1; 
 
    var col = (index % 5) + 1; 
 
    $("span").text("That was row " + row + " and col " + col); 
 
    $(this).css('background-color', 'red'); 
 
});

td { 
 
    border: 1px solid; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span>Select a cell!</span> 
 
<div id="tableContainer"></div>