You should not use"magic numbers". Define a constant representing the size of the grid:

var GRID_SIZE = 3;

Generallynew Array() can be shorted to[] (an empty literal array). Also it's not really necessary to give a length when initializing arrays, because JavaScript has dynamic arrays. Thus

var grid=new Array(3);grid[0]=new Array(3);grid[1]=new Array(3);grid[2]=new Array(3);

can be shorted to

var grid = [];grid[0] = [];grid[1] = [];grid[2] = [];

or by using a literal array even to

var grid = [ [], [], [] ];

This however skips the use if theGRID_SIZE constant. So you could instead integrate this with the loops filling the grid:

var grid = [];for (var i = 0; i < GRID_SIZE; i++) {  grid[i] = [];  for (var j = 0; j < GRID_SIZE; j++) {    grid[i][j] = 0;  }}

Your HTML table is unnecessary complex.

You don't need to encode the coordinates of the cells in the ID. You can get the coordinates (or find a cell based on coordinates) using the DOM (more about that later).

You don't need to give every single the same class. Instead give the table a class or identifier (e.g.tic-tac-toe) and style the cells using adescendant selector:

.tic-tac-toe td {   /* ... */}

Event handlers shouldn't be assigned using HTML attributes. And if you do, then you don't need to use#"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" rel="nofollow">addEventListener.

Finally the non-breaking spaces are also unnecessary. To make sure that the empty cells are displayed use the CSSempty-cells: show.

This leaves us with:

<table>  <tr>    <td></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>  </tr></table>

When assigning the event handler it is not not necessary to assign each cell it's own handler. Instead assign the handler to a common parent element - in this case the table. The event object will contain a reference to the actually clicked element:

var table = document.getElementById("tic-tac-toe-1");table.addEventListener("click", tableClick);function tableClick(event) {    var element = event.target;    if (element && element.tagName === "TD") {       var y = element.cellIndex;       var x = element.parent.rowIndex;       clickCell(element, x, y);    }}

Since you already have a reference to the clicked cell, you don't need to look for it inclickCell.

function clickCell(cell, x, y) {  if (grid[x][y] > 0) {    alert("Dont Try To Cheat Bud!!!!!");  } else {    if (currentPlayer == 1) {      cell.className = "x";      cell.innerHTML = "X";      grid[x][y]=1;      currentPlayer=2;    } else {      cell.className = "o";      cell.innerHTML = "O";      grid[x][y]=2;      currentPlayer=1;    }  }}

Also you shouldn't assign the colors to the elements. Instead define the colors in the CSS with classes.

.x { color: #3F88C5; }.o { color: #E2C290; }

If you ever need to get an element from the coordinates, then you can use the DOM propertiesrows andcells:

var cell = table.rows[y].cells[x];

Some quick last things:

• Identifying the current player using the numbers1 and2 is not good (magic numbers again). Find an alternative. Also: What happens, if the user doesn't enter1 or2 at the beginning?

• The reset function basically has the same loop as the initialization. You should re-write both so that you can re-use the loop instead of having it twice in your code.

• Thegrid variable isn't necessary. All information in it can be get directly from the HTML table.