asked on

DOM der DOM DOM and css

I want to manipulate classes of <td> elements within a table using DOM in a similar way that this code manipulates the id 'foo'. So, my aim would be to change all <td>'s of class 'foo'.

Do you know the correct syntax for doing this, if it's possible?

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+theValue);
else eval("obj."+theProp+"='"+theValue+"'");
}
}

onclick="MM_changeProp('foo','','style.border','solid','td')">Survey Results</a>

mreuring

Uhm, hmmm I don't think I understand what you mean. Targetting all td's with the class foo for adding styles to them would be:
td.foo {
background: green;
}

But I think you might mean something a bit more intricate than that...

Martin

RozanaZ

Maybe this can help you:

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
styleBlue = "color: blue; font-weight: bold";
styleRed = "color: red;"
function changeStyle(name)
{
      obj = document.getElementById("myTd");
      obj.style.cssText = eval(name);
}
</script>
</HEAD>
<BODY>
<table>
      <tr>
            <td id="myTd" name="myTd" >Data data data</td>
      </tr>
</table><br>
<input type="button" onClick="javascript: changeStyle('styleBlue')" value="Change to Blue Style"><br>
<input type="button" onClick="javascript: changeStyle('styleRed')" value="Change to Red Style"><br>
</BODY>
</HTML>

metalmickey

ASKER

Heres my problem,

http://homepages.nildram.co.uk/~natkins/car_css/

theres a table that has borders applied that is initially hidden, but the table borders are being displayed on load.

I need to turn em off,

any ideas?

MM

RozanaZ

Do you mean this?

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
styleBlue = "color: blue; font-weight: bold";
styleRed = "color: red;"
function changeStyle(name)
{
obj = document.getElementById("sum-cont");
obj.style.border = '0';
}
</script>
</HEAD>
<BODY>

<div class="sum-cont" id="sum-cont" style="position:absolute;border:1px solid hotpink; margin-left:5px;">
<div class=sum-header style="margin-bottom:45px; display:block;">

If running costs, appearance and reliability were all that mattered,
the dinky Smart car would be near the top of the tree. But this car
doesn’t make the grade for safety and security.</div>
</div>
<br><br><br><br><br>
<input type="button" onClick="javascript: changeStyle()" value="remove border"><br>

</BODY>
</HTML>

metalmickey

ASKER

Thanks, but No. I need to target every instance of <td> within a table (or, at least ones of a particular class), so I guess what I need is not a getElementById functtion but something akin to a 'getElementByClass' function, if such a thing exists!

I'm trying to be able to switch td borders 'on' with an onClick function within a layer, with them valued:0 , or switched 'off' on load. Since my problem is IE 'ghosting' the td borders of hidden layers on loading the entire page.

ASKER CERTIFIED SOLUTION

arantius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Thogek

DoYourThing() {
var oAllTds = getElementsByTagName('td');
for(var i = 0; i < oAllTds.length; ++i) {
if(oAllTds[i].className == 'foo') {
// oAllTds[i] is a TD element with class=foo
// Do your thing to oAllTds[i] here
}
}
}

trevorhartman

create two classes and set the className of the tds when you want to change their style

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

peh803

have you tried using the .className javascript property?

For example,

var AllTDs=document.getElementsByTagName("td");
for (var i=0; i<AllTDs.length; i++) {
if (AllTDs[i].className=='borderOnClass'){
AllTDs[i].className='borderOffClass';
}
else
{
AllTDs[i].className='borderOffClass';
}
}

regards,
peh803

Thogek

Isn't that (className) what I suggested above? :-O

peh803

COBOL:
In response to this:

>>peh803,

>> Either you failed to read the comments already posted or you chose not to take the professional approach of recognizing that you comment
>> extends off a comment already posted by expert Thogek. That might go over in the Dodge City of ASP, but if you do it in CSS you may find
>> the page editors deleting your comments or taking stronger action if you persist. We collaborate here; and the little trick to get a piece don't
fly.

Have a bad day or something? I was just trying to help -- not steal anyone's precious points. I'm sorry if I offended you by coming into "your realm". I've been taught a lesson, and I can promise you -- it won't happen again. I'll be sure to keep restrain my future tomfoolery within the confines of the ASP area.

Oh yeah, and you might want to consider not berating people for donating their time to help out. Geesh man, calm down.

peh803 (aka, "I'll do whatever it takes to steal points from another expert")

peh803

Sean :

If / when you do close this question, please make sure all points go to Thogek -- I was simply trying to help (not steal points), and obviously he posted the answer before I did.

peh803

mreuring

I'm sorry I dropped out of this question, but it was taking flight before I could get an answer in edgewise, if it is not yet resolved, I would like to add a suggestion, I do not believe enyone else has come up with here.
How about using CSS to do all the targetting work for you, this is an approach I've used often in the past. When elements of a certain class have to react upon a change of state, reflect that change of state somewhere on the page by setting a class on the ancestor of all given elements. As an example:
<table id="defaultHidden">
<tr>
<td class="foo"> </td>
<td class="foo"> </td>
</tr>
<tr>
<td class="bar"> </td>
<td class="bar"> </td>
</table>

When scripting, just write something according to:
document.getElementById("defaultHidden").className = "reveal";

For CSS you could now write:
table#defaultHidden td {
font-family: Verdana;
}
td.foo {
display: none;
}
table.reveal td.foo {
display: inherit;
border: 1px solid green;
}

Hope this might help,

Martin

metalmickey

ASKER

Hi All

Appologies to all posters.

I have been on holiday so havent been able to administrate the Q.

As it turns out the html/javascript problem has been pulled from my project as the whole project has been canned.

Please advise as to how to split points.

I know the theres a lot of goodwill about and essentially the boards arent about points, they're about knowlegde sharing, so am happy to double the points for being a nuisance.

Thanks for your patience.

MM

seanpowell

That's okay MM - looking through the posts I would probably split between:

arantius http:#11785067 and COBOLdinosaur http:#11789062

Thogek

peh803 (if you're still reading here),
BTW, no big deal on the above. I was just checking that I didn't miss something new, not trying to start a silly point-hoarding exchange. ;-)

peh803

Thogek :

Thanks -- and you're right to point it out.

When someone else accidentally re-posts in a post that I've been previously involved in, I typically point it out as well. I appreciate you handling it politely.

I did, however, take exception to COBOLdinosaur's rude comments, and judging by his history of negative feedback, I'm not the only person that has found his comments to be unprofessional and condescending.

Thanks again,
peh803