JavaScript：如何更改每个td的背景颜色？

时间：2017-05-17 14:49:43

标签： javascript

我有一个由javascript创建的表。 这个大表的每个td包含另一个表，现在我需要更改每个td的背景颜色和大表的不同颜色，只需要这个图像image example我该怎么做？ 我希望你明白我想要的。 当然只有javascript

＆＃13;
＆＃13; 
//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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我认为这符合您的要求。

1.创建一个函数来生成随机颜色

2.为每个td调用该函数并附加为背景颜色

enter image description here 

//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>

相关问题
最新问题