Untitled

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Időkép demo</title>
  <style type='text/css'>
    table tbody td {
  width: 64px;
  height: 64px;
}

.hideg, .meleg {
  background-size: 64px 64px;
}

.hideg {
  background-image: url(https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-68-128.png);
}

.meleg {
  background-image: url(https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-01-128.png);
}

  </style>


<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var napokHomerseklete = [
  10, -20, 5, 8, 12, 22, 45
];
var idojarasClass;
var currentElement;

for (var i = 0; i < napokHomerseklete.length; i++) {
  if (napokHomerseklete[i] <= 5) {
    idojarasClass = 'hideg';
  } else {
    idojarasClass = 'meleg';
  }
  currentElement =  document.getElementsByTagName("td")[i];
    currentElement.classList.add(idojarasClass);
}

}//]]>

</script>

</head>
<body>
  <div id="idojaras">
  <table>
    <thead>
      <tr>
        <th>H</th>
        <th>K</th>
        <th>Sz</th>
        <th>Cs</th>
        <th>P</th>
        <th>Sz</th>
        <th>V</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>


</body>

</html>