JavaScript: How to change the background color of each td?

Question

i have a table created by javascript. Every td of this big table contain an other table, now i need to change the background color of every td and with different colors of the big table, just likr this image image example how can i do that? I hope u understand what i want. Of course with javascript only

//Table de multiplication de 1 a 12
function tablede2(n){
 var ch = "<table border='0'>",i;
 for(i=1;i<=10;i++){
  ch = ch + "<tr><td width='30' align='center'>"+n+"</td><td width='30' align='center'>*</td><td width='30' align='center'>"+i+"</td><td width='30' align='center'>=</td><td width='30' align='center'>"+(i*n)+"</td></tr>";
 }
 return ch +"</table>";
 
}

function tableMult(){
 var ch = "<table border='1' cellspacing='0'>",i, j,n;
 n=1;

 for(j=1; j<=4; j++){
  ch += "<tr>";
  for(i=1;i<=3;i++){
  
   ch +="<td>";
   ch += tablede2(n);
   n++;
   ch += "</td>";
  }

 ch += "</tr>";
 }
 ch += "</table>"; 

 var elt = document.getElementById("p3");
 elt.innerHTML = ch;
}

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Java Script</title>
 <script src="exo1_tpJS.js"></script>
</head>
<body>
 
 <button onclick="tableMult()">Table de multiplication de 1 a 12<em> avec innerHTML</em></button>
 <div id="p3">Table de multiplication de 2</div>
</body>
</html>

Possible duplicate of [How do I change the background color with JavaScript?](http://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — brianforan, May 17 '17 at 14:53
Many consider generating more than 1 line of HTML with JavaScript to be bad practice. Try to avoid it when possible. — Baruch, May 17 '17 at 14:56

score 0 · Accepted Answer · answered May 18 '17 at 04:47

I think this fits your requirement.

1.Create a function to generate random colors

2.call that function for every td and append as background-color

//Table de multiplication de 1 a 12
function tablede2(n){
 var ch = "<table border='0'>",i,bg;
 for(i=1;i<=10;i++){

    
  if(i%2==0)
   bg='orange';
  else bg='silver';
  ch = ch + "<tr><td style='width='30' align='center'>"+n+"</td><td width='30' align='center'>*</td><td width='30' align='center'>"+i+"</td><td width='30' align='center'>=</td><td width='30' align='center'>"+(i*n)+"</td></tr>";
 }
 return ch +"</table>";
 
}

function tableMult(){
 var ch = "<table border='1' cellspacing='0'>",i, j,n;
 n=1;

 for(j=1; j<=4; j++){
  ch += "<tr>";
  for(i=1;i<=3;i++){
      var color=getBackgroundColor();
       // console.log(color);
      
   ch +="<td style='background-color:"+color+"'>";
   ch += tablede2(n);
   n++;
   ch += "</td>";
  }

 ch += "</tr>";
 }
 ch += "</table>"; 

 var elt = document.getElementById("p3");
 elt.innerHTML = ch;
}

function getBackgroundColor(){
  
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var col = "rgb(" + r + "," + g + "," + b + ")";

return col;
  
}

 <button onclick="tableMult()">Table de multiplication de 1 a 12<em> avec innerHTML</em></button>
 <div id="p3">Table de multiplication de 2</div>

JavaScript: How to change the background color of each td?

1 Answers1