Question

我正在尝试更改静态html表中td元素的背景颜色。我将通过数据库调用发现td的调用，并且需要通过将背景颜色从无变为黄色来显示td。我已经构建了一个css文件来匹配td类属性，所以我可以按类id隔离表格单元格：

例如 -

<table id="radarTable">
    <tr>
        <td class="a01"></td>
        <td class="a02"></td>
        <td class="a03"></td>
        <td class="a04"></td>
        <td class="a05"></td>
        <td class="a06"></td>
        <td class="a07"></td>
        <td class="a08"></td>
        <td class="a09"></td>
        <td class="a10"></td>
    </tr>
</table>

css代码示例 -

#yellowZone
{
    height: 12px;
    width: 12px;
    background-image: url(../images/yellowSquare.gif);
    background-repeat: no-repeat;
}


    #radarTable table td{
      border: 1px solid #666666;
      height: 12px;
      width: 12px;
  }

.a01{

}

.a02{

}

.a03{

}

.a04{

}

.a05{

}

.a06{

}

.a07{

}

.a08{

}

.a09{

}

.a10{

我知道我正在推动这个问题，我不能在我的客户项目中继续前进，直到我从头脑中得到这个概念。我正在对此进行OCDing，并且无法集中精力来完成这个想法。任何建议都会很棒。谢谢罗伯特。

编辑答案中的评论：

作为回应，首先要感谢非常精确的评论。我有两种形式的表 - id元素作为唯一标识符和类声明。如果使用id不需要css文件来声明它们，那么这是最好的方法吗？

另外，我正在使用jquery，但我仍处于学习曲线的前沿。我确实有aspnet的经验，所以概念没问题。该对话框非常有用，您的回答将使我超越“撞击监视器”代码块阶段。

数据库调用将加载一个jquery数组，我将遍历并分配定位单元格的背景颜色，使它们“可见”，以显示放在表格后面的图形。这将完成我正在努力的结果。感谢您的评论。我完成后会发布我的输出。

罗伯特

感谢您的帮助。一些建议可能会起作用;但关于jquery类属性的答案很有用。如果你想看到实际的建议，我有我的测试项目的网址。 http://www.stewardtech.net/dtvMap.php哇，我想恢复这个项目的工作。 aha时刻并不适合我，但无论如何我都会接受它。当我被困住时，我的头上的泥很厚，在我清除问题之前我无法前进。

罗伯特

Answer 1

一些事情：

我注意到 yellowZone 没有用“dot”前缀定义，以使其成为一个类。这是故意的吗？
您可以使用id属性唯一标识每个td，而不是使用类。
如果你想使用一个类，如果它只用于检索元素，则不需要在css文件中定义它。
如果您使用id，则应该能够使用document.getElementById（“id”）来检索适当的表格单元格。例如：

HTML：

<body>
    <table>
        <tr>
            <td id="a01"></td>
        </tr>
        <tr>
            <td id="a02"></td>
        </tr>
    </table>
</body>

使用Javascript：

var tableData = document.getElementById("a01");
tableData.setAttribute("class", "yellowZone");
// Some versions of IE don't like the attribute "class"
tableData.setAttribute("className", "yellowZone");

Answer 2

为什么不给细胞个体ID？

然后您可以使用

访问该元素

document.getElementById("YOURID").style.backgroundColor = "yellow";

这似乎是最快/最简单的解决方案。

Answer 3

您可以在Javascript中使用jQuery更改单元格颜色，如下所示：

$('table#radarTable td.a03').css('backgroundColor', 'yellow');

如果这不能解答您的问题，请提供有关您尝试做什么以及如何做的更多详情;你的问题不清楚。

通过javascript和css访问html表的td属性

编辑答案中的评论：

3 个答案: