ansaurus

Question

Accessing td property of a html table through javascript and css.

Answer 1

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 2009-10-16 00:30:51

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 2009-10-16 14:03:23

Answer 2

+1 A:

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");

Pandincus 2009-10-16 00:33:18

I usually go tableData.className = "yellowZone"; instead of setAttribute I wonder which is best?

Matthew Lock 2009-10-16 01:15:31

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 2009-10-16 12:28:47

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 2009-10-16 14:08:28

Ah, well, in that case: $("#a01").attr("class", "yellowZone");

Pandincus 2009-10-16 18:43:24

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 2009-10-16 19:54:15

Answer 3

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 2009-10-16 00:35:02

ansaurus

tags:

views:

answers:

Accessing td property of a html table through javascript and css.

Edit for comments from answers:

related questions