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

时间:2014-01-21 12:56:07

标签: javascript php html arrays onclick

我想在第一次点击时在单元格内放置一个图像,在第二次点击时在同一位置放置另一个图像。为了做到这一点,我尝试在标签中编写onclick函数..但由于它在函数内写入它不会工作..有没有其他方法来实现需要?请帮助?

用于放置图像的JS: -

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);
 }

制作网格的代码:

$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>";

1 个答案:

答案 0 :(得分:1)

试试这个:

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
  }
}