views:

450

answers:

3

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 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 -

#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

A: 

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.

Tim
I do have a version of the table (quite large) that uses id's and not class declaration. I will re-implement my design with id's. thanks.
rjsteward
+1  A: 

Couple of things:

  1. I noticed yellowZone wasn't defined with a "dot" prefix to make it a class. Was this intentional?
  2. You can use the id attribute to uniquely identify each td, instead of using a class.
  3. 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.
  4. 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");
Pandincus
I usually go tableData.className = "yellowZone"; instead of setAttribute I wonder which is best?
Matthew Lock
Good question -- I have no idea :-D. I don't usually use vanilla javascript DOM manipulation; I've been spoiled by jQuery, but I didn't want to give the OP an indirect answer of "Oh, just use jQuery."
Pandincus
I am using jquery, but am still learning the basics. I code in javascript, aspnet, c# and php(when needed). So a jquery suggestion would be great. thanks Robert
rjsteward
Ah, well, in that case: $("#a01").attr("class", "yellowZone");
Pandincus
awesome. this worked. just what I need. thank you. I will continue my project and implement the rest of my design. I will post my solution when I completed the database and looping logic.
rjsteward
A: 

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.

SLaks