<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color_table_according_content</title>
<style>
.notEmpty {
background-color: #DDFFFF:#99FFCC;
text-align:center;
}
</style>
</head>
<body>
<table id="mytable" style="width: 100%">
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
</tr>
</table>
<script>
var ta = document.getElementById('mytable');
for(var i=0;i<ta.rows.length;i++) {
var trs = ta.getElementsByTagName("tr")[i];
for (var j=0; j<trs.cells.length ; j++) {
if (i>0 && j>0) { // not in the first line or first column
var cellVal = trs.cells[j].innerHTML;
if (cellVal != "")
trs.cells[j].className = "notEmpty";
}
}
}
</script>
</body>
</html>