A style changing with Javascript question(DHTML)?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

A style changing with Javascript question(DHTML)?

Post by Mds »

Hi.
I have a table , Like this :

Code: Select all

<table id="MDS_Table">
  <tr>
    <td>sth</td>
    <td>sth</td>
  </tr>
  <tr>
    <td>sth</td>
    <td>sth</td>
  </tr>
  <tr>
    <td>sth</td>
    <td>sth</td>
  </tr>
</table>
Now how can I change background color of all <td> with javascript ? Image
Thank you.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: A style changing with Javascript question(DHTML)?

Post by VladSun »

[js]tds = document.getElementById('MDS_Table').GetElementsByTagName('td');for (i=0; i < tds.length; i++)    tds.style.backgroundColor = 'black';[/js]

Or by playing with CSS:

Code: Select all

TABLE.yellow TD{   background-color: yellow;} TABLE.green TD{   background-color: green;}

[js]document.getElementById('MDS_Table').className = 'yellow';document.getElementById('MDS_Table').className = 'green';[/js]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: A style changing with Javascript question(DHTML)?

Post by Mds »

Thanks.
I used FF3 and Firebug (FF3 plug in) and this error occurred : Image
document.getElementById("table_2").GetElementsByTagName is not a function
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: A style changing with Javascript question(DHTML)?

Post by VladSun »

GetElementsByTagName => getElementsByTagName
Last edited by VladSun on Wed Oct 01, 2008 5:04 pm, edited 1 time in total.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: A style changing with Javascript question(DHTML)?

Post by Mds »

We must use getElementsByTagName instead of GetElementsByTagName
So my problem solved. Image
Thank you.

Code: Select all

var table = window.document.getElementById('MDS_Table').getElementsByTagName('TD');
for (i=0; i < table.length; i++)
    table[i].style.backgroundColor = '#af3830';
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: A style changing with Javascript question(DHTML)?

Post by VladSun »

If I were you, I would use my second solution - the CSS one ;)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: A style changing with Javascript question(DHTML)?

Post by Mds »

Well, Why ? Image
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: A style changing with Javascript question(DHTML)?

Post by kaszu »

I think because it's CSS job to do styling, not javascript.
If you need to do it dynamically, then create a CSS class and assign classname with javascript.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: A style changing with Javascript question(DHTML)?

Post by VladSun »

Besause it's faster and cleaner than the JS one :) although, in fact, they are the same DOM impementation. Also, because the "code" domain and the "presentation" domain are absolutely separated.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: A style changing with Javascript question(DHTML)?

Post by Mds »

Thank you Image
Post Reply