[英]Changing background color of HTML Table cell after Javascript Changes it
I have an HTML table that outputs like this: (It's manually built in HTML and styled with CSS via classes rowStyle1
and rowStyle2
)我有一个 HTML 表,输出如下:(它是在 HTML 中手动构建的,并通过
rowStyle1
和rowStyle2
类使用 CSS 设置样式)
When the user clicks the buttons for next week or previous week, the page loads a schedule and, if there is any datapoint to load into the table, it both puts the text in the cell and changes the background color with this code:当用户单击下周或前一周的按钮时,页面会加载一个时间表,如果有任何数据点要加载到表中,它会将文本放入单元格并使用以下代码更改背景颜色:
document.getElementById(cellID).innerText = parsed.title
document.getElementById(cellID).style.backgroundColor = "#cc00cc"
The problem is, when the user wants to change weeks, the table should be "cleared out", and made ready for the new data.问题是,当用户想要更改周数时,表应该被“清除”,并为新数据做好准备。 That doesn't happen even though I put this code at the beginning of the function that triggers when either button is pressed:
即使我将此代码放在按下任一按钮时触发的 function 的开头,也不会发生这种情况:
let cells = document.getElementsByClassName("rowStyle1")
for (let i = 0; i < cells.length; i++) {
cells[i].style.backgroundColor = "#ffffff"
}
let cells2 = document.getElementsByClassName("rowStyle2")
for (let i = 0; i < cells2.length; i++) {
cells2[i].style.backgroundColor = "#d8ebfa"
}
I know this code works, because I can change the colors of the cells when the page first loads using this code, but it still leaves a colored cell left over when I change weeks:我知道这段代码有效,因为我可以在使用这段代码首次加载页面时更改单元格的 colors,但是当我更改周时它仍然留下一个彩色单元格:
How do I change the color of the cell back so I can "reset" the table to get ready for the new data?如何更改单元格的颜色,以便我可以“重置”表格以为新数据做好准备? Does it have something to do with setting the color via javascript?
跟javascript设置颜色有关系吗?
(BTW, this whole code has been written in native HTML, CSS, and JavaScript, so any solutions that don't involve any plug-ins would be greatly appreciated!) (顺便说一句,这整个代码都是用原生 HTML、CSS 和 JavaScript 编写的,所以任何不涉及任何插件的解决方案将不胜感激!)
It's generally a bad idea to set styles directly with JavaScript. It is usually better to set a class, ...将 styles 直接设置为 JavaScript 通常是个坏主意。通常设置一个 class 会更好,...
(NB: Don't repeatedly look for element references, but store it): (注意:不要重复查找元素引用,而是存储它):
const cell = document.getElementById(cellID);
cell.innerText = parsed.title
cell.classList.add("highlighted");
... and the all you need to do is remove that class again, when you reset: ...您需要做的就是在重置时再次删除 class:
for (let i = 0; i < cells.length; i++) {
cells[i].classList.remove("highlighted");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.