Tic-Tac-Toe game in JavaScript/HTML/CSS
You should not use "magic numbers". Define a constant representing the size of the grid:

var GRID_SIZE = 3;


Generally new 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 the GRID_SIZE constant. So you could instead integrate this with the loops filling the grid:

var grid = [];
for (var i = 0; i &lt; GRID_SIZE; i++) {
  grid[i] = [];
  for (var j = 0; j &lt; 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 a descendant 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 javascript: in them. javascript: is only used in attributes that normally don't contain JavaScript, such as href, however you shouldn't be using that either. Event handlers should only be assigned using addEventListener. 

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

This leaves us with: 

&lt;table class="tic-tac-toe" id="tic-tac-toe-1"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;




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 &amp;&amp; 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 in clickCell. 

function clickCell(cell, x, y) {
  if (grid[x][y] &gt; 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 properties rows and cells:

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




Some quick last things: 


Identifying the current player using the numbers 1 and 2 is not good (magic numbers again). Find an alternative. Also: What happens, if the user doesn't enter 1 or 2 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.
The grid variable isn't necessary. All information in it can be get directly from the HTML table.