晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

JavaScript)HTML<TABLE>の<TD>に、セルの数値に合わせて、背景色を付ける。

昨日、不快指数一覧図表を作成した。

このテーブルの背景色は、JavaScriptを使って、HTML<TABLE>の<TD>に、セル内の数値に合わせて付けている。

jQueryを使う方法もあるが、jQueryを使わないでJavaScriptだけで非常に簡単にできる。「.rows」「.cells」が便利。

今回、セル内の数値に合わせて、<TD>にクラス名を付けている。

<style>
.d70 {
	background: #FFFFA5;
}
.d75 {
	background: #FFD19E;
}
.d80 {
	background: #FF9E9E;
}
.d85 {
	background: #C09FE0;
}
</style>
<script>
let table = document.getElementById('fukaiShisuu');
for (let row of table.rows) {
	for(let cell of row.cells) {
		if (cell.tagName == "TD") {	// TD 大文字でないと駄目
			if (Number(cell.innerText) >= 85) {
				cell.classList.add("d85");
			} else if (Number(cell.innerText) >= 80) {
				cell.classList.add("d80");
			} else if (Number(cell.innerText) >= 75) {
				cell.classList.add("d75");
			} else if (Number(cell.innerText) >= 70) {
				cell.classList.add("d70");
			}
		}
	}
}
</script>

以下の例では、

<style>
.d25 {
	background: #FFFF7F;
}
.d28 {
	background: #FFC07C;
}
.d31 {
	background: #FF6868;
	color: #fff;
}
.other {
	background: #AFFFFF;
}
</style>
<script>
let table = document.getElementById('data-table');
for (let row of table.rows) {
	for(let cell of row.cells){
		if (cell.tagName == "TD" && cell.innerText != "" && cell.innerText.indexOf("/") === -1) {	// TD 大文字でないと駄目
			if (Number(cell.innerText) >= 31) {
				cell.classList.add("d31");
			} else if (Number(cell.innerText) >= 28) {
				cell.classList.add("d28");
			} else if (Number(cell.innerText) >= 25) {
				cell.classList.add("d25");
			} else {
				cell.classList.add("other");
			}
		}
	}
}
</script>