gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:01:20 26 4
gpt4 key购买 nike

我试图点击表格中的每个单元格,以便我点击的选定单元格的背景颜色从白色变为灰色。我也试图让它像一个切换,所以如果我再次点击单元格,背景从灰色变为白色,但它什么也没做。我发现了一个类似的问题,但答案是高级编码。我想创建一个更简单的代码。我检查了 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 ();
}

最佳答案

首先: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没有 ()因为它是对函数的引用而不是对函数的调用。

如果你想以网络开发的方式做事,你应该使用类而不是显式设置颜色,这样你就可以:

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在左上角的下拉菜单中。

关于javascript - 选择表格单元格以更改背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31511277/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com