js/html/cssでクリック可能なグリッドのセルを作成する

Question

3の代わりに5行を探していることを除いて、tic tacのつま先に似たゲーム用のグリッドを作成したいグリッドの私はグラフのようなグリッドが必要で、グリッドの各セルはクリック可能で、クリックすると特定の色に変わります。各セルには個々のタグが必要です。なぜなら、後で、プレーヤーが5つの行を連続して達成するかどうかをプログラムが判断する必要があるからです。たとえば、最初の行の2番目のセルはセル[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

EDIT：私は怒鳴るdinamicallyグリッドを生成するコードを変更しました。

---

NOTE：この答えはjQueryのを使用していますのでご注意ください。

---

まず、グリッドを生成する関数を作成できます。実行しようとしていた行と列がループされますが、正しいHTMLコードで文字列が返されます。 jQueryを使用して、そのHTML文字列をHTMLエレメントとして文書に追加します。

ところで、あなたはCSSを持っているので、javascriptでセルのサイズを設定しないでください。

ユーザーがセルをクリックすると、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>