change color of every cell in table HTML JavaScript CSS

Question

My code only change color of all table when I click the button. Notice that there is a space between each cell so I figured out that I need to change color of each on every cells in table, not the table it self. Any suggestion, I am kind of new to JS and CSS.

 <script type="text/javascript">
 function color(){
    document.getElementById('mytable').style.backgroundColor ="blue";
 }
 </script>

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

I would advise you change the new of your function clear() to something else - I don't believe this word will work when used as a function name when inline. This is because, as @Dennis mentioned, document.clear will be found in the chain before window.clear. See this question for more information about that.

Here's a working jsFiddle.

One way to do this could be like so:

function color(){
   var x = document.getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor ="blue";
   }
}

function clearit(){
   var x = document.getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor = "";
   }
}

edited May 23 '17 at 10:28

Community

1
1

answered May 05 '13 at 17:09

dsgriffin

66,495
17
137
137

`clear` is fine as a function name in general but you can't use it inline because `document.clear` will be found in the chain before `window.clear`. See [this question](http://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript) – Dennis May 05 '13 at 17:21
@Dennis Thanks, I couldn't remember the exact reasoning. Is it ok if I add your explanation to the answer? – dsgriffin May 05 '13 at 17:21
Thanks, so you used loop and go through all cell and change bg color. So in the ...getElementsByTagName('td')... 'td' is the tag in the CSS code right, I mean in the style. If I want to fill all of cell with for example letter X, can I use x[i].value = "X"? – Ronaldinho Learn Coding May 05 '13 at 17:23
1

@Zenith Go ahead - I edited the comment to provide a SO question for more in-depth discussion as well. – Dennis May 05 '13 at 17:24
I tried x[i].value = "X" but table was not filled with X letter? Any ideas? – Ronaldinho Learn Coding May 05 '13 at 17:27
1

@RonaldinhoState `x[i].innerHTML = "X";` is one way. There are many other ways you may prefer to do this, see the answers here - http://stackoverflow.com/questions/2163558/how-to-insert-text-in-a-td-with-id-using-javascript – dsgriffin May 05 '13 at 17:29
@Zenith why this is not working, I added some components to table, didn't change anything in JS yet? http://jsfiddle.net/7udc4/ – Ronaldinho Learn Coding May 05 '13 at 18:05
1

@RonaldinhoState That's because you called select 'color' as well, the same name as your function. http://jsfiddle.net/7udc4/2/ – dsgriffin May 05 '13 at 18:13
@Zenith Could you help me, this is not working, this time I edited the JS code, form and style are not changed. http://jsfiddle.net/7udc4/4/ – Ronaldinho Learn Coding May 05 '13 at 18:40
1

@RonaldinhoState You may need to ask seperate question as this is going a little off topic now. For starters replace all `getElementByName` with `getElementsByName` – dsgriffin May 05 '13 at 18:47
@Zenith Will do now. Hope you help me out again. – Ronaldinho Learn Coding May 05 '13 at 18:53

score 1 · Answer 2 · answered May 05 '13 at 17:09

You can do this:

CSS

td.blueCol { background-color: blue; }

JS

function color() {
    var tds = document.getElementById('mytable').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++) {
        // set a class which defines the background color
        tds[i].className = "blueCol";
    }
}

function clear() {
    var tds = document.getElementById('mytable').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++) {
        // re-set a class which defines the background color
        tds[i].className = "";
    }
}

score 0 · Answer 3 · answered May 05 '13 at 17:07

0

Change your table tag to something like this:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
...
</table>

In order to remove the spacing (or you can do it via css)

answered May 05 '13 at 17:07

drip

12,378
2
30
49

change color of every cell in table HTML JavaScript CSS

3 Answers3