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

标签 javascript mysql css function

我正在尝试更改静态 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{

我知道我正在挑战极限,在我摆脱这个概念之前,我无法推进我客户的元素。我对此很强制,无法集中精力完成这个想法。任何建议都会很棒。谢谢罗伯特。

编辑答案中的评论:

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

此外,我正在使用 jquery,但我仍处于学习曲线的前沿。我确实有aspnet经验,所以概念没问题。该对话非常有帮助,您的回答会让我度过“用头撞显示器”的代码块阶段。

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

罗伯特

感谢您的帮助。一些建议可能会奏效;但是关于 jquery class attrib 的答案效果很好。如果您想查看实际建议,我有我的测试元素的网址。 http://www.stewardtech.net/dtvMap.php哇,我想回到这个元素上工作。顿悟时刻不属于我,但无论如何我都会接受。当我被卡住时,我脑子里的泥巴很厚,我无法前进,直到我解决了这个问题。

罗伯特

最佳答案

一些事情:

  1. 我注意到 yellowZone 没有定义一个“点”前缀来使它成为一个类。这是故意的吗?
  2. 您可以使用 id 属性来唯一标识每个 td,而不是使用类。
  3. 如果您确实想使用一个类,如果它仅用于检索元素,则无需在您的 css 文件中定义它。
  4. 如果您继续使用 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");

关于javascript - 通过 javascript 和 css 访问 html 表的 td 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1575831/

相关文章:

c# - 动态添加TinyMCE编辑器到文本框

javascript - 如何将类属性传递给嵌套在 NodeJS 中 class>method>each 内的 .each block ?

php - 通过PHP解析字典对象并创建MySQL表

php - 如何在 Laravel 中编写这个复杂的查询

html - Python Tornado 不会加载 .Css 文件

javascript - 我正在尝试将图像大小设置为按钮的大小

javascript - 对服务器返回的 json 对象的 Crossdomian ajax 请求显示错误 Unexpected token :

mysql - 如何将以下 3 个 select 语句包含在单个 mySQL View 中

HTML/CSS 显示/隐藏多个元素?

java - 使用 CSS Parser 和 Regex (Java) 替换 CSS 中的 url