实施例

Question

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

http://jsfiddle.net/RE006/nyzswnx2/1/

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>

JS：

var toggleHighlight = function () {
    document.td.style.backgroundColor = "#cecece;"
}

window.onload = function () {
   getElementsByTagName("td").onclick = toggleHighlight ();
}

Answer 1

首先：document.getElementsByTagName('td')返回NodeList而不是单个节点，因此您必须在其上循环以附加事件侦听器：

JS：

window.onload = function () {
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++)
        tds[i].onclick = toggleHighlight;
}

请注意，在tds[i].onclick = toggleHighlight;行中，toggleHighlight没有(和)，因为它是对函数的引用，而不是对函数的调用

如果你想以web开发的方式做事，你应该使用类而不是明确地设置颜色，所以你可以：

JS：

function toggleHighlight() {
    var td = this;
    if (td.className == 'highlight')
        td.className = '';
    else
        td.className = 'highlight';
}

CSS：

.highlight {
    background-color: #cecece;
}

您可以在此处查看工作示例：http://jsfiddle.net/nyzswnx2/40/

请注意，为了window.onload工作，我在左上角的下拉列表中选择了No wrap - in <body>而不是onLoad。

Answer 2

请注意

document.getElementsByTagName返回一个数组。
当您设置onclick时，您将需要一个函数（function() {}），而不是该函数的返回值（undefined示例中的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();

小提琴：http://jsfiddle.net/nyzswnx2/47/

Answer 3

你可以使用jQuery，它更简单。

添加一个类css：

.gray {
background-color:#efefef;
 }

并使用以下命令更改您的代码js：

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

演示：

http://jsfiddle.net/nyzswnx2/51/

Answer 4

getElementsByTagName("td").onclick = toggleHighlight ();

首先，这一行是错误的，因为getElementsByTagName（）返回一个需要循环的列表。

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

还有另一种可能性。可以在表上使用onclick（）事件，然后使用函数document.elementFromPoint（）来获取td，而不是为表中的每个单元定义onclick（）事件。然而，帖子中使用的方式（td上的onclick（）事件）非常标准。

要切换颜色，需要检查颜色是否已设置（在这种情况下为cecece）。

实施例

<html>
    <head>
        <script>
            function Init(){
                document.querySelector('table').onclick = function(event){colorCell(event)}
            }

            function colorCell(event){
                var tE = document.elementFromPoint(event.clientX, event.clientY);
                if (tE.tagName === 'TD') tE.style.backgroundColor = (tE.style.backgroundColor === '') ? '#cecece' : ''
            }
        </script>
    </head>

    <body onload = 'Init()'>
        <table>
            <tr>
                <td>0.0</td>
                <td>0.1</td>
                <td>0.2</td>
            </tr>
            <tr>
                <td>1.0</td>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
            <tr>
                <td>1.0</td>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
        </table>
    </body>
</html>

Answer 5

首先要做的事情是：你的小提琴已经设置为在window.onload上运行代码，所以你不需要重复它。您只需编写代码，它就会在加载时自动执行。

现在，对于您的问题：您正在尝试将事件侦听器分配给节点集合，而您确实希望将事件侦听器分配给所述集合的每个元素。有很多方法可以解决它，但你可以安全地这样做：

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

请注意两件事：

我使用了addEventListener，而不是将函数分配给onclick事件。我鼓励您查找分配事件的两种方式。
在为事件分配函数时，或者一般来说，将函数称为变量时，不应该调用函数，而只需通过名称引用它。在这个例子中，我已经将toggleHighlight函数作为第二个参数传递给addEventListener函数，只需传递函数的 name ，而不是通过调用它。如果要调用该函数，则传递给addEventListener函数的第二个参数将是toggleHighlight函数的返回值，而不是对函数本身的引用。我鼓励您查看在JavaScript中调用函数和传递函数作为参考之间的区别。

现在让我们来看看toggleHighlight函数：这个函数有点特殊，因为它响应了一个事件。因此，它的第一个参数是对事件本身的引用，因此函数应该这样写：

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

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

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

切换颜色需要您的代码是有状态的：它必须以某种方式保存每个单元格的状态，并使用它来决定应该将哪种颜色用于单元格的背景。当然，我们可以使用单元格的颜色作为状态，但这不是真的可以接受，所以我们将做更多的工作来使事情发挥作用。您要做的第一件事是定义可用的状态，并将每个单元的初始状态存储在某处。我们可以更新我们的代码：

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

让我们来看看我做了什么：

我声明了两个常量，每个状态一个，并为每个常量分配一个任意值。这不是唯一的方法，它只是一种方式;
我将cellStates变量声明为空对象。我们将使用它来存储每个单元格的状态;
在循环遍历单元格时，我使用当前单元格的id作为用于在cellStates对象中存储单元格状态的键。最初，所有细胞都将关闭。在循环结束时，cellStates将为每个单元格都有一个密钥，并且单元格的状态存储在其中。

现在我们已经保存了状态，我们希望每次单击一个单元格时更新它，并相应地更改单元格的颜色。让我们更新我们的toggleHighlight函数：

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

而且，就这样，您现在可以在点击时切换每个单元格的颜色。我鼓励您在继续学习其他主题之前，仔细研究并理解这里发生的事情。玩得开心，快乐！

完整小提琴：http://jsfiddle.net/nyzswnx2/29/

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

5 个答案:

实施例