changing background color of a table column javascript

Question

i would like to set a background color for each number that is a multiple of 3 and 2 how can i do this? i'm not very good at this javascript stuff

HTML:

<div id="mainDiv">
    <input type="text" id="myNo" />
    <input type="button" id="gridSize" value="Show It" />
</div>

Javascript:

var button = document.getElementById('gridSize');
 button.onclick = function(e){
    result  = document.getElementById('result');
    num = parseInt(document.getElementById('myNo').value);
    alert(num);
    if ( isNaN(num) ){
        alert("No Numeric Value!");
    }
    else{
        result.innerHTML = num;
    }
    var str = "<table border='2'>";
    for (row = 0; row < num; row++){
    str += "<tr>";
        for (col = 0; col < num; col++){
            str += "<td>";
            var randNum = Math.floor(Math.random() * 100) + 1;
            if (randNum % 2){
                console.log(randNum + "Red");
            }
            str += randNum;
            str += "</td>";
        }
        str += "</tr>";
     }
     str = str + "</table>";
     result.innerHTML = str;
}

by a multiple of 3 and 2 do you mean 6? if not, what happens when it's a multiple of both? — Seph Reed
– Seph Reed, Commented Apr 2, 2016 at 20:54

Stuart · Accepted Answer · 2016-04-03 18:39:21Z

If you put your td creations into a if else statement you can do it pretty simply like this:

HTML

<div id="mainDiv">
  <input type="text" id="myNo" />
  <input type="button" id="gridSize" value="Show It" />
</div>

<div id="result"></div>

CSS

.two {
  background: red;
}

.three {
  background: blue;
}

JS

var button = document.getElementById('gridSize');
button.onclick = function(e) {
  result = document.getElementById('result');
  num = parseInt(document.getElementById('myNo').value);
  alert(num);
  if (isNaN(num)) {
    alert("No Numeric Value!");
  } else {
    result.innerHTML = num;
  }
  var str = "<table border='2'>";
  for (row = 0; row < num; row++) {
    str += "<tr>";
    for (col = 0; col < num; col++) {
      var randNum = Math.floor(Math.random() * 100) + 1;
      if (randNum % 2 === 0) {
        str += '<td class="two">';
      } else if (randNum % 3 === 0) {
        str += '<td class="three">';
      } else {
        str += "<td>";
      }
      str += randNum + "</td>";
    }
    str += "</tr>";
  }
  str = str + "</table>";
  result.innerHTML = str;
}

jsfiddle here

John · Accepted Answer · 2016-04-02 21:08:03Z

1

This is how you check, if its dividable by 2 and 3:

if(randNum %2===0 && randNum %3===0){
  // do some
}

edited Apr 2, 2016 at 21:08

answered Apr 2, 2016 at 20:59

John

7705 silver badges12 bronze badges

Comments

Ali Seyedi · Accepted Answer · 2016-04-02 21:08:37Z

0

Here is the way you can do that(similar to your code)

var resultTable  = document.createElement('table');
var tr = resultTable.insertRow();

tbl.style.border = '1px solid black';

for (row = 0; row < num; row++){
    var tr = resultTable.insertRow();
    for (col = 0; col < num; col++){
        var td = tr.insertCell();
        var randNum = Math.floor(Math.random() * 100) + 1;
        //for example if you want numbers countable with 2 to be red
        if ((randNum % 2) === 0){
            td.style.backgroundColor = "red";                 
        }                        
        td.appendChild(document.createTextNode(randNum.toString()));
    }
 }
 result.appendChild(resultTable);

edited Apr 2, 2016 at 21:08

answered Apr 2, 2016 at 21:01

Ali Seyedi

1,8171 gold badge20 silver badges25 bronze badges

3 Comments

John Over a year ago

Where do you check if its dividable by 3?

Ali Seyedi Over a year ago

I'm not sure about what he really needs. I checked dividable by 2 as an example he can modify as he desires.

Angel Over a year ago

look at viiiyears post at the bottom its exactly what i was looking for

Collectives™ on Stack Overflow

changing background color of a table column javascript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related