我想切换不同空表格单元格的背景颜色。在这里找到了一个在切换背景颜色时效果很好的 Javascript，但我无法让它按照我想要的方式工作。
该示例有三个表格单元格，但只有最后一个单元格在更改颜色 - 等于单击哪个单元格。
尝试了五个小时来修复它并放弃了...Javascript 对我来说太复杂了。
在此先感谢您的帮助，这个问题真的让我抓狂。
<html>
<style type="text/css">
<!--
body {font-family: Geneva,Arial,Helvetica,sans-serif;}
.bmm-01 td {background-color:#000000 }
.bmm-02 td {background-color:#000000 }
.bmm-03 td {background-color:#000000 }
-->
</style>
<head>
<script>
var colors = ["000000", "ffffff", "yellow", "blue", "gray"]; var colorIndex = 0;
function changeColor() { var col = document.getElementById("bmm-01"); if( colorIndex >= colors.length ) { colorIndex = 0; }
col.style.backgroundColor = colors[colorIndex]; colorIndex++; }
var colors = ["000000", "ffffff", "yellow", "blue", "gray"]; var colorIndex = 0;
function changeColor() { var col = document.getElementById("bmm-02"); if( colorIndex >= colors.length ) { colorIndex = 0; }
col.style.backgroundColor = colors[colorIndex]; colorIndex++; }
var colors = ["000000", "ffffff", "yellow", "blue", "gray"]; var colorIndex = 0;
function changeColor() { var col = document.getElementById("bmm-03"); if( colorIndex >= colors.length ) { colorIndex = 0; }
col.style.backgroundColor = colors[colorIndex]; colorIndex++; }
</script>
<title>Title</title>
</head>
<body bgcolor="#f5f5f5" text="#f8f8ff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<table border="1" cellspacing="0" cellpadding="15" width="100%" height="100%">
<td align="center" valign="middle" bgcolor="#2977cc" height="1" colspan="2" rowspan="1"><font size="6"><b>Title</b></font></td><tr>
<td align="right" valign="top" width="50%">
<table border="1" width="150">
<td id="bmm-01" bgcolor="#000000" height="25"><a onclick="changeColor();" style="display:block; width: 100%"> </a></td><tr>
<td id="bmm-02" bgcolor="#000000" height="25"><a onclick="changeColor();" style="display:block; width: 100%"> </a></td><tr>
<td id="bmm-03" bgcolor="#000000" height="25"><a onclick="changeColor();" style="display:block; width: 100%"> </a></td><tr>
</table>
</td><td align="left" valign="top" width="50%">
Content
</td><tr><td align="center" height="1" bgcolor="#606060" colspan="2">
Footer
</td>
</table>
</body></html>最佳答案
您的问题是您已经定义了三次 changeColor() 函数。 Javascript 只能识别每个函数名称的一个函数定义，因此您实际上已经用最后一个定义覆盖了前两个定义。因此，单击时所有三个单元格都会触发完全相同的功能，并且该功能会更改最后一个单元格。
这并不意味着您需要为每个单元格设置一个单独的函数。当您单击一个单元格时，浏览器会调用您在 html 中指定的函数，但您也可以向该函数传递一个参数，它表示被单击的元素，如下所示:
<a onclick="changeColor(this)"></a>
现在，您的 changeColor 函数不带参数，因此定义不知道有关单击哪个单元格的任何信息，但这很容易修复 - 只需添加参数:
function changeColor(cell) {
var col = document.getElementById("bmm-03");
if( colorIndex >= colors.length ) {
colorIndex = 0;
}
col.style.backgroundColor = colors[colorIndex];
colorIndex++;
}
现在您可以访问在 changeColor 中单击的单元格。这意味着您不再需要使用 getElementById()，您可以直接引用被点击的元素。了解所有这些后，您可以像这样重新定义函数:
function changeColor(cell) {
if( colorIndex >= colors.length ) {
colorIndex = 0;
}
cell.style.backgroundColor = colors[colorIndex];
colorIndex++;
}
不过，我们还没有完成。您希望每个单元格循环显示其自己的一组颜色 - 但是您的颜色数组与您对函数所做的问题相同。它们都被覆盖了。但是你只需要一个颜色数组，然后你就可以有一个与每个单元格相关联的索引。这个协会怎么做？您可以定义一个在 elementIds 和索引之间关联的表，如下所示:
var cellColors = {
"bmm-01": 1,
"bmm-02": 4,
"bmm-03": 2
}
这样做的另一个好处是，如果您插入一个带有新 ID 的新单元格，它可以自动插入到该表中。
那么，最终产品的外观如何？
var colors = ["#000000", "#ffffff", "yellow", "blue", "gray"];
var cellColors = {};
function changeColor(cell) {
// We don't give this a value immediately, because we don't
// yet know whether this cell has an entry in the cellColors table.
var colorIndex;
if (cellColors[cell.id] !== undefined) {
colorIndex = cellColors[cell.id];
} else {
cellColors[cell.id] = 1;
colorIndex = cellColors[cell.id];
}
cell.style.backgroundColor = colors[colorIndex];
cellColors[cell.id]++;
// Make sure the index stays within bounds
cellColors[cell.id] = cellColors[cell.id] % colors.length;
}<html>
<style type="text/css">
<!--
body {font-family: Geneva,Arial,Helvetica,sans-serif;}
.bmm-01 td {background-color:#000000 }
.bmm-02 td {background-color:#000000 }
.bmm-03 td {background-color:#000000 }
-->
</style>
<head>
<title>Title</title>
</head>
<body bgcolor="#f5f5f5" text="#f8f8ff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<table border="1" cellspacing="0" cellpadding="15" width="100%" height="100%">
<td align="center" valign="middle" bgcolor="#2977cc" height="1" colspan="2" rowspan="1"><font size="6"><b>Title</b></font></td><tr>
<td align="right" valign="top" width="50%">
<table border="1" width="150">
<td id="bmm-01" bgcolor="#000000" height="25"><a id="bmm-a-01" onclick="changeColor(this)" style="display:block; width: 100%"> </a></td><tr>
<td id="bmm-02" bgcolor="#000000" height="25"><a id="bmm-a-02" onclick="changeColor(this)" style="display:block; width: 100%"> </a></td><tr>
<td id="bmm-03" bgcolor="#000000" height="25"><a id="bmm-a-03" onclick="changeColor(this)" style="display:block; width: 100%"> </a></td><tr>
</table>
</td><td align="left" valign="top" width="50%">
Content
</td><tr><td align="center" height="1" bgcolor="#606060" colspan="2">
Footer
</td>
</table>
</body></html>我还更改了您的 html，以便您的 anchor 元素也有自己的 ID，用作 cellColors 表中的键。希望你觉得所有这些都有帮助:)
关于javascript - 在不同的 <td> 中单独切换颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45907659/