Create clickable grid jQuery/Javascript

Question

My goal is to create a clickable grid in jQuery/javascript that when a cell is clicked it will return the index value of the cell and then not allow for anymore clicking after the first click (I'm working on a board game so a click on the board would be a move and once you have moved you can't move until your next turn). However, currently I'm having issues simply getting my click event to work properly.

For now I'm just looking to make it so when I click on my grid it changes the color of the cell to red.

I looked at Creating a Clickable Grid in a Web Browser but I have very little experience with js so I was fairly confused by how the callback functions worked. Therefore I was attempting to use part of that example and jQuery which seems, at least to me, to be much more understandable when it comes to attaching events to things.

EDIT: Forgot to say what my issue was but its the fact that when I run all of the following code and click on the grid nothing happens.

grid.js:

$(document).ready(function()
    {
        grid();
    });

$("#grid td").click(function()
    {
        alert("Clicked!");
        $("#grid td").addClass("clicked");
    });

function grid()
{
    var grid = document.getElementById("grid");

    for(var r = 0; r<18; r++)
    {
        var tr = grid.appendChild(document.createElement('tr'));

        for(var c = 0; c<18; c++)
        {
            var cell = tr.appendChild(document.createElement('td'));
        }
    }
}

grid.css:

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px dotted #ccc;
    text-align:center;
    font-family:sans-serif; font-size:16px
}
.grid td.clicked {
    background-color:red;
}

test.html:

<!doctype html>
<html lang="en">
<head>  
    <meta charset="utf8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="grid.css" rel="stylesheet">
    <script src="grid.js"></script>
</head>
<body>
        <table class="grid" id="grid">
        </table>
</body>
</html>

Does this answer your question? [Creating a Clickable Grid in a Web Browser](https://stackoverflow.com/questions/9140101/creating-a-clickable-grid-in-a-web-browser) — ggorlen, Jan 02 '20 at 00:22

richb01 · Accepted Answer · 2014-03-16T00:17:07.667

I would change the event handler. I built a little sample in jsfiddle that might help. If not, please let us know specifically what you are having trouble with.

http://jsfiddle.net/richbuff/gLF4W/

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

Edit: Please put the click handler inside the ready() handler like this:

$(document)ready({
    grid();

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

The issue is that the table (#grid) does not exist when the handler is being defined. You could also try putting the handler after the table tag.

I changed my code to what you have there but it still doesn't do anything. I notice that the only difference between your jsfiddle example and my code is that I'm generating the grid in grid.js. Would that cause issues? — user1443362, Mar 15 '14 at 23:56

Create clickable grid jQuery/Javascript

1 Answers1