Javascript 选择表格单元格以更改背景颜色

我试图单击表格上的每个单元格，以便我单击的选定单元格将背景颜色从白色更改为灰色。我还试图使它像一个切换，所以如果我再次点击单元格的背景从灰色变为白色，但它没有做任何事情。我发现了一个类似的问题，但答案是高级编码。我想创建一个更简单的代码。我检查了Firebug，但没有发现任何错误。如果有任何建议，我将不胜感激。我是Javascript新手

HTML5：

<table class="bingo">
    <tr>
        <td id="square0"></td>
        <td id="square1"></td>
        <td id="square2"></td>
    </tr>
    <tr>
        <td id="square3"></td>
        <td id="square4"></td>
        <td id="square5"></td>

    </tr>
    <tr>
        <td id="square6"></td>
        <td id="square7"></td>
        <td id="square8"></td>
    </tr>
</table>

首先，此行是错误的，因为getElementsByTagName（）返回循环所需的列表

var tL = getElementsByTagName("td"); 
for(var i=0, j=tL.length; i<j; i++) tL[i].onclick = function(){this.style.backgroundColor = "#cecece"}

var tL=getElementsByTagName（“td”）；
对于（var i=0，j=tL.length；i
首先，此行是错误的，因为getElementsByTagName（）返回循环所需的列表

var tL = getElementsByTagName("td"); 
for(var i=0, j=tL.length; i<j; i++) tL[i].onclick = function(){this.style.backgroundColor = "#cecece"}

var tL=getElementsByTagName（“td”）；
对于（var i=0，j=tL.length；i首先：
document.getElementsByTagName（'td'）
返回一个
节点列表，而不是单个节点，因此您必须在其上循环以附加事件侦听器：

JS:

CSS:

您可以在此处看到工作示例：

请注意，为了创建
窗口.onload
工作，我在左上角的下拉列表中选择了
无包装
，而不是
onload
。
首先：
文档。getElementsByTagName（'td'）
返回一个
节点列表
，而不是单个节点，因此您必须在其上循环以附加事件侦听器：

JS:

CSS:

您可以在此处看到工作示例：

请注意，为了使
window.onload
工作，我在左上角的下拉列表中选择了
No wrap-in
，而不是
onload
。
第一件事：您的小提琴已经设置为在window.onload上运行代码，因此您无需重复。您只需编写代码，它就会自动执行装载后立即停止

现在，针对您的问题：您正在尝试将事件侦听器分配给节点集合，而您确实希望将事件侦听器分配给所述集合的每个元素。有许多方法可以实现此目的，但您可以安全地执行以下操作：

var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', toggleHighlight);
}

function toggleHighlight(event) {
    var cell = event.target;

    cell.style.backgroundColor = '#cecece';
}

看到我在那里做了什么了吗？我使用
事件
对象来获取事件的
目标
，并且我已经在目标本身上设置了样式。每次单击单元格时，事件的目标将引用触发事件的单元格

切换颜色要求您的代码是有状态的：它必须以某种方式保存每个单元格的状态，并使用它来决定单元格的背景应使用哪种颜色。当然，我们可以使用单元格的颜色作为状态，但这不是真正可以接受的，因此我们将做更多的工作来让事情正常工作。首先，您需要nt要做的是定义可用的状态，并将每个单元格的初始状态存储在某个位置。我们可以这样更新代码：

const SQUARE_OFF = 0;
const SQUARE_ON  = 1;

var cells = document.getElementsByTagName('td');
var cellStates = {};

for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', toggleHighlight);
    cellStates[cells[i].id] = SQUARE_OFF;
}

而且，就像那样，你现在可以在点击后切换每个单元格的颜色。我鼓励你在进入其他主题之前，仔细试验和了解这里发生的事情。祝你学习愉快

完成提琴：首先，您的提琴已设置为在window.onload上运行代码，因此您无需重复。您只需编写代码，它将在加载时自动执行

现在，针对您的问题：您正在尝试将事件侦听器分配给节点集合，而您确实希望将事件侦听器分配给所述集合的每个元素。有许多方法可以实现此目的，但您可以安全地执行以下操作：

var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', toggleHighlight);
}

function toggleHighlight(event) {
    var cell = event.target;

    cell.style.backgroundColor = '#cecece';
}

看到我在那里做了什么了吗？我使用
事件
对象来获取事件的
目标
，并且我已经在目标本身上设置了样式。每次单击单元格时，事件的目标将引用触发事件的单元格

切换颜色要求您的代码是有状态的：它必须以某种方式保存每个单元格的状态，并使用它来决定单元格的背景应使用哪种颜色。当然，我们可以使用单元格的颜色作为状态，但这不是真正可以接受的，因此我们将做更多的工作来让事情正常工作。首先，您需要nt要做的是定义可用的状态，并将每个单元格的初始状态存储在某个位置。我们可以这样更新代码：

const SQUARE_OFF = 0;
const SQUARE_ON  = 1;

var cells = document.getElementsByTagName('td');
var cellStates = {};

for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', toggleHighlight);
    cellStates[cells[i].id] = SQUARE_OFF;
}

而且，就像那样，你现在可以在点击后切换每个单元格的颜色。我鼓励你在进入其他主题之前，仔细试验和了解这里发生的事情。祝你学习愉快

完整小提琴：
注意


document.getElementsByTagName返回一个数组
设置onclick时，需要的是一个函数（
function（）{}
），而不是该函数的返回值（在
onclick=toggleHighlight（）；
的示例中，它是
未定义的


根据您的JavaScript，您可能需要尝试以下内容

var toggleHighlight = function (e) {
    var bg = e.target.style.backgroundColor;
    if (bg == 'red') {
        e.target.style.backgroundColor = '';
    } else {
        e.target.style.backgroundColor = 'red';   
    }
}

var prepareTable = function () {
    var cells = document.getElementsByTagName("td");
    for (var i = 0 ; i < cells.length ; i++) {
        cells[i].onclick = function(event) {
            toggleHighlight(event);
        }
    }
}

document.onload = prepareTable();

var-toggleHighlight=函数（e）{
var bg=e.target.style.backgroundColor；
如果（背景=='红色'）{
e、 target.style.backgroundColor=''；
}否则{
e、 target.style.backgroundColor='red'；
}
}
var prepareTable=函数（）{
var cells=document.getElementsByTagName（“td”）；
对于（变量i=0；i

小提琴：请注意


document.getElementsByTagName返回一个数组
设置onclick时，需要的是一个函数（
function（）{}
），而不是该函数的返回值（在
onclick=toggleHighlight（）；
的示例中，它是
未定义的


根据您的JavaScript，您可能需要尝试以下内容

var toggleHighlight = function (e) {
    var bg = e.target.style.backgroundColor;
    if (bg == 'red') {
        e.target.style.backgroundColor = '';
    } else {
        e.target.style.backgroundColor = 'red';   
    }
}

var prepareTable = function () {
    var cells = document.getElementsByTagName("td");
    for (var i = 0 ; i < cells.length ; i++) {
        cells[i].onclick = function(event) {
            toggleHighlight(event);
        }
    }
}

document.onload = prepareTable();

var-toggleH
function toggleHighlight(event) {
    var cell = event.target;
    var cellState = (cellStates[cell.id] === SQUARE_OFF) ? SQUARE_ON : SQUARE_OFF;

    cellStates[cell.id] = cellState;

    cell.style.backgroundColor = (cellState === SQUARE_OFF) ? '#fff' : '#cecece';
}    

var toggleHighlight = function (e) {
    var bg = e.target.style.backgroundColor;
    if (bg == 'red') {
        e.target.style.backgroundColor = '';
    } else {
        e.target.style.backgroundColor = 'red';   
    }
}

var prepareTable = function () {
    var cells = document.getElementsByTagName("td");
    for (var i = 0 ; i < cells.length ; i++) {
        cells[i].onclick = function(event) {
            toggleHighlight(event);
        }
    }
}

document.onload = prepareTable();

.gray {
background-color:#efefef;
 }

$(document).ready(function(){
  $('td').on('click',function(){
     $(this).toggleClass('gray');
  });
});