gpt4 book ai didi

javascript - 使用html更改鼠标单击表格单元格的颜色

转载 作者:太空宇宙 更新时间:2023-11-04 10:07:06 24 4
gpt4 key购买 nike

我使用 html 设计了一个 2*4 的表格。我需要在奇数鼠标点击时将单元格的背景颜色从白色(默认)更改为绿色,在偶数点击时反之亦然。但是尽管只点击了任何单元格第一个单元格从白色变为绿色,反之亦然。请帮助我。谢谢。

<script type="text/javascript">
function change(){
var s=document.getElementById('slot');
if(s.bgColor.match("white")){
s.bgColor="green";
}
else{
s.bgColor="white";
}
}
</script>

最佳答案

我在这里回答过类似的问题

Javascript .addEventListener "mouseenter" for a class

不同的是,这涉及到 click 事件,并且没有 css 伪选择器。

首先使用 querySelectorAll 查询所有 td 元素的列表。

下一步循环并为它们中的每一个添加 click 事件 监听器。

可以通过多种方式设置类,但我推荐使用className 方法。要在类之间切换,三元运算符是我们最好的 friend 。

this.className = this.className == "white" ? "green": "white";

这意味着它根据其当前值设置类。

var cells = document.querySelectorAll("td");

for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function() {
this.className= this.className == "white" ? "green" : "white";
});
}
.green { background: green; color: white; }
.white { background: white; color: black; }

#sales-list { border: 1px solid black; }
td { padding: 10px; border: 1px solid black; }
<table id="sales-list">
<tr>
<td class="white">Row 1 Col 1</td>
<td class="white">Row 1 Col 2</td>
<td class="white">Row 1 Col 3</td>
<td class="white">Row 1 Col 4</td>
</tr>
<tr>
<td class="white">Row 2 Col 1</td>
<td class="white">Row 2 Col 2</td>
<td class="white">Row 2 Col 3</td>
<td class="white">Row 2 Col 4</td>
</tr>
</table>

关于javascript - 使用html更改鼠标单击表格单元格的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37911693/

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