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. 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. I have built a css file to match the td class attribute so I can isolate the table cell by class i开发者_开发百科d:
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 -
#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. If using id's doesn't require the css file to declare them, then would that be the best way to go?
Also, I am using jquery, but I'm still on the front slope of the learning curve. I do have experience in aspnet, so the concept is no problem. 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. This will accomplish the ui result that I'm striving for. 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. 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. 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
Couple of things:
- I noticed yellowZone wasn't defined with a "dot" prefix to make it a class. Was this intentional?
- You can use the id attribute to uniquely identify each td, instead of using a class.
- 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.
- If you go with using an id, you should be able to use document.getElementById("id") to retrieve the appropriate table cell. For example:
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");
You can change the cell colors using jQuery in Javascript, like this:
$('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.
Why not give the cells individual ids?
Then you can access the element with
document.getElementById("YOURID").style.backgroundColor = "yellow";
This seems like its the fastest/simplest solution.
加载中,请稍侯......
精彩评论