识别第二次鼠标单击网格中的同一单元格

Question

i want to place an image inside the cell on the first click and another image on the second click at the same position. In order to do that i tried writing onclick function in the tag..but as its written within functions it wont work..is there any other way to achieve the need ? plz help?

JS for placing the images on click:-

function changeColor1(elem)
{ 
     elem.innerHTML = '<img src="images/atom1.png" width="20px" height="20px" onclick=changecolor2(this) />';   
    //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
    var x= elem.cellIndex;
    var y= elem.parentNode.rowIndex;
    click_count(x,y);
 }
 function changeColor2(elem)
{ 
     elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px" onclick=changecolor3(this) />';    
    //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
    var x= elem.cellIndex;
    var y= elem.parentNode.rowIndex;
    click_count(x,y);
 }

code for making the grid:

$rows = 7; // define number of rows
$cols = 6;// define number of columns
echo "<center>";
echo "<table border='1'   cellspacing=0 cellpadding='35' pixels'>";

for($tr=0;$tr<$rows;$tr++){

    echo "<tr>";
        for($td=0;$td<$cols;$td++){
               echo "<td onclick=\"changeColor1(this)\" >&nbsp &nbsp</td>";
        }
    echo "</tr>";

Answer 1

Try this:

function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function changeColor2(elem)
{ 
 if(!hasClass(elem, 'clicked')){
  //clicked first time 
   elem.className = elem.className + " clicked";//add clicked class to element on first click
   elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px"    onclick=changecolor3(this) />';    
  //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
  var x= elem.cellIndex;
  var y= elem.parentNode.rowIndex;
  click_count(x,y);}
else{
    //clicked second time and onward
  }
}