通过javascript和css访问html表的td属性
[英]Accessing td property of a html table through javascript and css
问题描述
I am trying to change the background color of a td element in a static html table. 
我正在尝试更改静态html表中td元素的背景颜色。 I will be finding the td's invovled through a database call and need to show the td by way of turning the background color from none to yellow. 我将通过数据库调用找到td，并且需要通过将背景颜色从无变为黄色来显示td。 I have built a css file to match the td class attribute so I can isolate the table cell by class id: 我已经建立了一个css文件来匹配td class属性，所以我可以通过class id隔离表单元格：
For example - 例如 -
<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>
example of css code - 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{
I know I am pushing the envelope here and I can't move forward in my client's project until I get this concept out of my head. 我知道我在这里努力，直到我完全明白这个概念，我才能继续进行客户项目。 I am OCDing over this and can't get a focus to nail this idea done. 我对此感到强迫，无法集中精力完成这个想法。 Any suggestions would be great. 任何建议都很好。 thanks Robert. 谢谢罗伯特。
Edit for comments from answers: 编辑答案中的评论：
In response, first of all thanks for the very precise comments. 作为回应，首先感谢您的非常准确的评论。 I have the table in both forms - id element as unique identifiers and class declarations. 我有两种形式的表格-id元素作为唯一标识符和类声明。 If using id's doesn't require the css file to declare them, then would that be the best way to go? 如果使用id不需要css文件来声明它们，那这是最好的方法吗？
Also, I am using jquery, but I'm still on the front slope of the learning curve. 另外，我正在使用jquery，但是我仍然处于学习曲线的最前沿。 I do have experience in aspnet, so the concept is no problem. 我确实有aspnet的经验，所以这个概念没有问题。 The dialog is very helpful and your answers will push me past the 'banging my head against the monitor' code block stage. 该对话框非常有帮助，您的回答将使我超越“把头撞到显示器上”的代码块阶段。
The database call will load a jquery array and I will loop through and assign the located cells' background color to make them "visible" to show through the graphic that is laying behind the table. 数据库调用将加载一个jquery数组，我将遍历并分配所定位的单元格的背景色，以使其“可见”，以显示在表格后面的图形中。 This will accomplish the ui result that I'm striving for. 这将实现我所追求的ui结果。 Thanks for the comments. 感谢您的评论。 I will post my output when I'm done. 完成后，我将发布输出。
Robert 罗伯特
Thanks for the help. 谢谢您的帮助。 Several suggestions will likely work; 几个建议可能会起作用； but the answer about the jquery class attrib works great. 但是有关jquery类attrib的答案很好用。 I have the url of my test project, if you want to see the suggestion in action. 如果您想查看建议的实施情况，我有测试项目的网址。 http://www.stewardtech.net/dtvMap.php Wow, I feel like getting back to work on this project. http://www.stewardtech.net/dtvMap.php哇，我想回到这个项目上工作。 The aha moment doesn't belonmg to me, but I will take it anyway. 啊哈的时刻不属于我，但我还是会接受。 When I get stuck, the mud in my head is so thick I can't move forward until I clear the problem. 当我被卡住时，脑袋里的泥浆是如此之厚，以至于我无法解决问题之前就无法前进。
Robert 罗伯特
3 个解决方案
解决方案1
1 2009-10-16 00:33:18
Couple of things: 几件事情：
- I noticed yellowZone wasn't defined with a "dot" prefix to make it a class. 我注意到yellowZone并未定义为“点”前缀来使其成为一个类。 Was this intentional? 这是故意的吗？
- You can use the id attribute to uniquely identify each td, instead of using a class. 您可以使用id属性来唯一地标识每个td，而不是使用类。
- If you do want to use a class, you don't need to define it in your css file if its only used for retrieving the element. 如果您确实想使用一个类，则只要它仅用于检索元素，就无需在css文件中定义它。
- If you go with using an id, you should be able to use document.getElementById("id") to retrieve the appropriate table cell. 如果要使用ID，则应该能够使用document.getElementById（“ id”）来检索适当的表格单元格。 For example: 例如：
HTML: HTML：
<body>
<table>
<tr>
<td id="a01"></td>
</tr>
<tr>
<td id="a02"></td>
</tr>
</table>
</body>
Javascript: Javascript：
var tableData = document.getElementById("a01");
tableData.setAttribute("class", "yellowZone");
// Some versions of IE don't like the attribute "class"
tableData.setAttribute("className", "yellowZone");
解决方案2
0 2009-10-16 00:30:51
Why not give the cells individual ids? 为什么不给单元格单独的ID？
Then you can access the element with 然后您可以使用
document.getElementById("YOURID").style.backgroundColor = "yellow";
This seems like its the fastest/simplest solution. 这似乎是最快/最简单的解决方案。
解决方案3
0 已采纳 2009-10-16 00:35:02
You can change the cell colors using jQuery in Javascript, like this: 您可以使用Javascript中的jQuery更改单元格颜色，如下所示：
$('table#radarTable td.a03').css('backgroundColor', 'yellow');
If this doesn't answer your question, please provide more details about what you're trying to do and how; 如果这样不能回答您的问题，请提供有关您要执行的操作以及操作方式的更多详细信息； your question is unclear. 您的问题尚不清楚。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.