Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 948
  • Last Modified:

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>
0
metalmickey
Asked:
metalmickey
  • 4
  • 3
  • 3
  • +6
2 Solutions
 
mreuringCommented:
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
0
 
RozanaZCommented:
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>
0
 
metalmickeyAuthor Commented:
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

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
RozanaZCommented:
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;">
            <!--<h3>Summary</h3></div><br clear=all>-->
            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>
0
 
metalmickeyAuthor Commented:
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.
0
 
arantiusCommented:
<html>
<head>
<script>
function switchTDBorders(on) {
      var els=document.getElementsByTagName("td");
      for (var i=0; i<els.length; i++) {
            els[i].style.border=(on?"1px solid black":"none");
      }
}
</script>
</head>
<body>
<table>
      <tr>
            <td>1</td>
            <td>2</td>
      </tr>
      <tr>
            <td>3</td>
            <td>4</td>
      </tr>
</table>
<button onclick="javascript:switchTDBorders(1);">Border On</button>
<button onclick="javascript:switchTDBorders(0);">Border Off</button>
</body>
</html>
0
 
ThogekCommented:
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
        }
    }
}
0
 
trevorhartmanCommented:
create two classes and set the className of the tds when you want to change their style
0
 
COBOLdinosaurCommented:
You can change the rule by going through the DOM to find the selector you are targeting:

<script type="text/javascript">
function modRule()
{
      if (!document.styleSheets) return;
      var mycss = new Array();
      if (document.styleSheets[0].cssRules)  // Mozilla
        {
         mycss = document.styleSheets[0].cssRules;
        }
      else
        {        
           mycss = document.styleSheets[0].rules;  // IE
        }
        for (i=0;i<mycss.length;i++)
        {
           if (mycss[i].selectorText.toLowerCase()=='td.foo')
           {
           mycss[i].style.cssText="border:0px solid black";
           }
        }
}
onload=modRule;
</script>


Cd&
0
 
peh803Commented:
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
0
 
ThogekCommented:
Isn't that (className) what I suggested above?  :-O
0
 
peh803Commented:
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")
0
 
peh803Commented:
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
0
 
mreuringCommented:
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">&nbsp;</td>
     <td class="foo">&nbsp;</td>
  </tr>
  <tr>
      <td class="bar">&nbsp;</td>
      <td class="bar">&nbsp;</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
0
 
metalmickeyAuthor Commented:
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

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

arantius http:#11785067 and COBOLdinosaur http:#11789062
0
 
ThogekCommented:
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.  ;-)
0
 
peh803Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 3
  • 3
  • +6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now