Question

所以我使用HTML的<table>元素创建了一个5x5网格。我希望每个单元格在单击时变为红色，并在不单元格时恢复为白色。它似乎无法检测到每个单元格上的第一次点击。一旦第一次点击被触发，它通常在1次点击下从红色和白色交替显示，但是当你第一次点击它时，它没有响应。为什么单元格在点击两次后对第一次点击作出响应，但如果以前从未接触到第一次点击，则不响应？

HTML片段：

<div class="board">
<table type="board">
 <tr>
        <td id="r1-c1" onclick="changeColor('r1-c1')"></td>
        <td id="r1-c2" onclick="changeColor('r1-c2')"></td>
        <td id="r1-c3" onclick="changeColor('r1-c3')"></td>
        <td id="r1-c4" onclick="changeColor('r1-c4')"></td>
        <td id="r1-c5" onclick="changeColor('r1-c5')"></td>
</tr>
...
</table>
</div>
<button id="submit" onclick="submitted()">Generate</button>

该片段分别嵌套在body和2个div标签中。

CSS片段：

table[type=board],tr,td{
    background-color: white;
    min-width: 80px;
    min-height: 380px;
    border: 2px solid black;
    text-align: center;
    font-size: 25px;
    margin: 0px;
}

JS代码：

function changeColor(id)
{
    if(document.getElementById(id).style.backgroundColor == "white"){
        document.getElementById(id).style.backgroundColor = "red";  
    }else{
        document.getElementById(id).style.backgroundColor = "white";
    }
}

Answer 1

使用以下代码。它会起作用。

function changeColor(id){
    if( (document.getElementById(id).style.backgroundColor == "white") || (document.getElementById(id).style.backgroundColor == "")){
        document.getElementById(id).style.backgroundColor = "red";  
    }else{
        document.getElementById(id).style.backgroundColor = "white";
    }

}

Answer 2

您尚未提供HTML，因此我必须创建DOM。

document.getElementById(id).style.backgroundColor

你的意思是说每个细胞都有一个身份证？

对于大型网格而言，这可能过于复杂。相反，你应该使用rowIndex＆amp; cellIndex找到特定的单元格。

您也可以使用event对象找到target。说它意味着event.target将帮助您找到被点击的单元格

var getTable = document.getElementById("demoTable");
//Declare a variable to hold the cellIndex & rowIndex
// On next click check if this values,& if not null change the background color of that cell
var col = "";  
var row = "";
getTable.addEventListener('click',function(event){
  console.log(col,row)
  if(col !== "" && row !== "" ){
    document.getElementById('demoTable').rows[row].cells[col].style.backgroundColor ="transparent" ;
  }
    col = event.target.cellIndex;
    row = event.target.parentNode.rowIndex;



//Set background of the cell on which it is clicked

    document.getElementById('demoTable').rows[row].cells[col].style.backgroundColor ="red" ;  
    })

JSFIDDLE

onclick（）无法首次点击HTML表格

2 个答案: