PDA

View Full Version : Change <td> class with javascript



iscot
08-01-2008, 08:32 PM
I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload. I've been able to call the function under my 'if' conditions, but there are errors in the javascript (my Javascript skills are rather lacking)

one of my iterations is as follows, where 'activities' is my ID name and 'selectedItem' is the class I'm trying to assign:

<script type="text/javascript">
function setActivities() {
document.activities.setAttribute("class", "selectedItem");
document.activities.setAttribute("className", "selectedItem");
return;
}
</script>

...
<tr ><td height="25" >
<div id="activities" ><a href="activities.htm" target="_parent" ><span class="firstLetter">A</span>CTIVITIES</a></div>
</td></tr>
...

There is a conditional statement based on the parent url the does call the function, but I get the error " 'document.activities' is null or not an object " when I test the page. Same error occurs when I try document.getElementById()

any help on changing the class of the <td> (or in the above code, <div>) will be greatly appreciated

Thanks,
Scot

rangana
08-02-2008, 04:19 AM
Use this script:


function setActivities() {
document.getElementById('activities').setAttribute('class','selectedItem'); // Failed on IE
document.getElementById('activities').className='selectedItem'; // Cross-browser
}

To access an element id, you have to use DOM:document.getElementById() (http://developer.mozilla.org/en/docs/DOM:document.getElementById).

jscheuer1
08-02-2008, 03:38 PM
function setActivities() {
document.getElementById('activities').className='selectedItem';
}

rainarts
08-02-2008, 04:26 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SomeTitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<script type="text/javascript">
<!--Begin Hiding

function changeActivities( actual_tag, actual_target, your_Activities )
{
var target_tag = document.getElementsByTagName( actual_tag );

for ( var initiate = 0; initiate < target_tag.length; initiate++ )

{
if ( target_tag.item( initiate ).className == actual_target )

{ target_tag.item( initiate ).style.color = '#C0C0C0';
target_tag.item( initiate ).item( initiate ).style.backgroundColor = '#444444';
target_tag.item( initiate ).style.fontWeigth = 'bold';
target_tag.item( initiate ).style.fontSize = '24px';
target_tag.item( initiate ).innerHTML = your_Activities;
}
}
}
// Done Hiding -->
</script>


</head>
<body>
<table>
<tr ><td height="25" >
<div id="activities" class="mydiv" onclick="changeActivities('div', 'mydiv');" ><a class="myanchor" href="activities.htm" target="_parent" onclick="changeActivities('a', 'myanchor');"><span class="firstLetter" onclick="changeActivities('span', 'firstLetter', 'A');">A</span>CTIVITIES! Now see the firstLetter</a></div>
</td></tr></table>
</body></html>

With this method you can manipulate tags and particular classes on your page... Hope it helps' you. Enjoy...

jscheuer1
08-02-2008, 04:55 PM
@rainarts,

(puts on his moderator hat)

When posting I notice you often use nearly impossible to read light colors for your text. Please refrain from doing so in the future.

(takes off his moderator hat)

Also, this:


.item( initiate )

may more simply be done as:


[initiate]

And an element may have more than one class name. See the specification for getting elements by class name (getElementsByClassName):

http://www.whatwg.org/specs/web-apps/current-work/#getelementsbyclassname

Which has already been implemented in at least several browsers. A spoof of it (as you have more or less put forth) should follow the specification as closely as possible and be skipped altogether (for reasons of efficiency) in those browsers supporting the native method.

This is a recent development, a good one that should be taken advantage of.

mburt
08-03-2008, 03:44 AM
Holy **** people... Don't make this complicated.
I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload

In the body, after the table:

<script type="text/javascript">
document.getElementById("activities")["className"] = "selectedItem";
</script>

We know that setAttribute() is not cross-browser because of IE, so there's no need of using it when other browsers can simply use the className attribute.

jscheuer1
08-03-2008, 05:01 AM
Please read the thread before posting.


Holy **** people... Don't make this complicated.

In the body, after the table:

<script type="text/javascript">
document.getElementById("activities")["className"] = "selectedItem";
</script>



Um, That's still more complicated (slightly) than what I already posted:



function setActivities() {
document.getElementById('activities').className='selectedItem';
}

iscot
08-06-2008, 07:10 PM
I am still getting " 'document.getElementById('...')'is null or not an object "
If I assign the to a variable (elem) as your link suggests I get the error that elem is null or not an object

jscheuer1
08-06-2008, 08:01 PM
Well, you cannot run:


function setActivities() {
document.getElementById('activities').className='selectedItem';
}

until after the element with the id of 'activities' has been parsed by the browser. The element with the id of 'activities' must exist, and be the only one on the page with that id.

Other than that, there could be all sorts of minor typos or other things that could cause a problem, hard to guess. But if you were to put up a demo of the problem on the web, it should be a piece of cake to figure out the problem(s).

Please post a link to the page on your site that contains the problematic code so we can check it out.

iscot
08-07-2008, 09:31 PM
Thanks John,
I should have know to call it after which got rid of the null error, but I'm still not getting the intended result. I put it up on a temporary url

http://iscotdesigns.com/activities.htm

Note that the links and pictures do not work as I did not load the unused portions. The files of activities.htm, LeftMenu.html, and default.css are loaded as they are on the final product. The code is in LeftMenu.html which is an iframe within activities.htm

I have alerts in to show that the javascript has assertained parent.location.href=="http://iscotdesigns.com/activities.htm" and that setActivities() function has been called. "activities" and "selectedItem" are both defined classes in default.css

jscheuer1
08-08-2008, 01:15 AM
The class name is being changed, that's not the problem. However, rightly or wrongly (I believe it is rightly), the background color assigned to the TR via its id takes precedence over the background color assigned to it by the class name. Now, since the background color of the page is the same as that assigned by the id, this rule isn't required:


#activities {
background-color: #d8cab0;
}

If you get rid of it, everything should then work as desired.

iscot
08-11-2008, 06:34 PM
Horray! That did it. Sometimes it's the simple things...
Thanks so much for your patient assistance. -Scot