JavaScript and client side scripting.
Moderator: General Moderators
Mds
Forum Contributor
Posts: 110 Joined: Tue Apr 22, 2008 8:56 pm
Contact:
Post
by Mds » Wed Oct 01, 2008 4:05 pm
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 ?
Thank you.
VladSun
DevNet Master
Posts: 4313 Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria
Post
by VladSun » Wed Oct 01, 2008 4:26 pm
[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
Mds
Forum Contributor
Posts: 110 Joined: Tue Apr 22, 2008 8:56 pm
Contact:
Post
by Mds » Wed Oct 01, 2008 4:45 pm
Thanks.
I used FF3 and Firebug (FF3 plug in) and this error occurred :
document.getElementById("table_2").GetElementsByTagName is not a function
VladSun
DevNet Master
Posts: 4313 Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria
Post
by VladSun » Wed Oct 01, 2008 5:02 pm
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
Mds
Forum Contributor
Posts: 110 Joined: Tue Apr 22, 2008 8:56 pm
Contact:
Post
by Mds » Wed Oct 01, 2008 5:03 pm
We must use
getElementsByTagName instead of
GetElementsByTagName
So my problem solved.
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';
VladSun
DevNet Master
Posts: 4313 Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria
Post
by VladSun » Thu Oct 02, 2008 4:26 am
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
Mds
Forum Contributor
Posts: 110 Joined: Tue Apr 22, 2008 8:56 pm
Contact:
Post
by Mds » Thu Oct 02, 2008 1:35 pm
Well, Why ?
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Thu Oct 02, 2008 1:49 pm
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.
VladSun
DevNet Master
Posts: 4313 Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria
Post
by VladSun » Thu Oct 02, 2008 2:40 pm
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
Mds
Forum Contributor
Posts: 110 Joined: Tue Apr 22, 2008 8:56 pm
Contact:
Post
by Mds » Thu Oct 02, 2008 3:55 pm
Thank you