文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在不同的<td>中单独切换颜色

问在不同的<td>中单独切换颜色
EN

Stack Overflow用户
提问于 2017-08-27 17:41:07
回答 2查看 38关注 0票数 1

我想切换不同空表格单元格的背景色。在这里找到了一个Javascript，当涉及到切换背景色时，它工作得很好，但是我不能让它按照我想要的方式工作。

该示例有三个表格单元格，但只有最后一个单元格正在更改颜色--与单击的颜色相等。

试了五个小时才修好然后放弃了..。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%">&nbsp;</a></td><tr>
<td id="bmm-02" bgcolor="#000000" height="25"><a onclick="changeColor();" style="display:block; width: 100%">&nbsp;</a></td><tr>
<td id="bmm-03" bgcolor="#000000" height="25"><a onclick="changeColor();" style="display:block; width: 100%">&nbsp;</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>

​

javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-27 18:45:24

您的问题是，您已经三次定义了changeColor()函数。Javascript只识别每个函数名的一个函数定义，因此实际上已经用最后一个定义覆盖了前两个定义。因此，所有三个单元格在单击时都会触发相同的函数，而该函数将更改最后一个单元格。

这个并不意味着每个单元格需要一个单独的函数。单击单元格时，浏览器调用在html中指定的函数，但也可以向该函数传递一个参数，该函数表示单击的元素，如下所示：

代码语言：javascript
运行
复制
<a onclick="changeColor(this)"></a>

现在，您的changeColor函数不接受参数，因此定义不知道单击了哪个单元格，但是这很容易修复--只需添加参数：

代码语言：javascript
运行
复制
function changeColor(cell) { 
    var col = document.getElementById("bmm-03"); 
    if( colorIndex >= colors.length ) { 
        colorIndex = 0; 
    }
    col.style.backgroundColor = colors[colorIndex]; 
    colorIndex++; 
}

现在您可以访问在changeColor中单击的单元格。这意味着您不再需要使用getElementById()，您可以直接引用单击的元素。知道了所有这些之后，您可以重新定义您的功能如下：

代码语言：javascript
运行
复制
function changeColor(cell) { 
    if( colorIndex >= colors.length ) { 
        colorIndex = 0; 
    }
    cell.style.backgroundColor = colors[colorIndex]; 
    colorIndex++; 
}

不过我们还没做完呢。您希望每个单元格循环自己的颜色集-但您的颜色数组有相同的问题，您对您的功能。它们都被覆盖了。但是只需要一个颜色数组，那么就可以有一个与每个单元格相关联的索引。怎么做这个协会？可以定义一个在elementIds和索引之间关联的表，如下所示：

代码语言：javascript
运行
复制
var cellColors = {
    "bmm-01": 1,
    "bmm-02": 4,
    "bmm-03": 2
}

它的另一个优点是，如果您插入一个新的单元格，并使用一个新的id，它可以自动插入到这个表中。

那么，最终的产品是什么样的呢？

​

代码语言：javascript
运行
复制
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;
}
代码语言：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>

<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%">&nbsp;</a></td><tr>
<td id="bmm-02" bgcolor="#000000" height="25"><a id="bmm-a-02" onclick="changeColor(this)" style="display:block; width: 100%">&nbsp;</a></td><tr>
<td id="bmm-03" bgcolor="#000000" height="25"><a id="bmm-a-03" onclick="changeColor(this)" style="display:block; width: 100%">&nbsp;</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，以便锚元素也有自己的in，这些in作为cellColors表中的键。希望你发现这些都有帮助:)

票数 1
EN

Stack Overflow用户

发布于 2017-08-27 18:49:42

这段代码不会像您预期的那样工作，因为您要3次重新定义changeColor函数(和颜色数组)，所以最后一个函数声明将覆盖第一个函数:这就是为什么您的代码只对最后一个单元格( id为bmm-03)很好地工作。如果您希望对所有单元格都有类似的行为(单击单元格将切换单元格背景色)，您可以简单地将单元格id传递给changeColor函数，如下所示：

​

代码语言：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(cellId) {
   var col = document.getElementById(cellId);
   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('bmm-01');" style="display:block; width: 100%">&nbsp;</a></td>
      <tr>
        <td id="bmm-02" bgcolor="#000000" height="25"><a onclick="changeColor('bmm-02');" style="display:block; width: 100%">&nbsp;</a></td>
        <tr>
          <td id="bmm-03" bgcolor="#000000" height="25"><a onclick="changeColor('bmm-03');" style="display:block; width: 100%">&nbsp;</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

​

还请注意，此代码对于(leftmargin，topmargin，.)具有一些无效的属性。标记以及在颜色代码前面省略哈希：#000000和#ffffff。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45907659

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档