title: Dynamicaly fill table td based on array of elements
body: <p>I need to fill the background of table td based on td values. Below is the sample code i wrote for filling the td cell value.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>applySchedules = function(schedules){
      $.map(schedules, function(value, index){   
          $('#'+value.start).css('background', 'green');
      });
  }
  
  var temp = [{start:9, end:10}, {start:13, end:14}]
  applySchedules(temp);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr {
     border-width:2px; 
     outline:solid;
  }
  td {
     border-width:2px; 
     width:60px; 
     outline:solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td id="8"&gt;8AM&lt;/td&gt;
          &lt;td id="9"&gt;9AM&lt;/td&gt;
          &lt;td id="10"&gt;10AM&lt;/td&gt;
          &lt;td id="11"&gt;11AM&lt;/td&gt;
          &lt;td id="12"&gt;12PM&lt;/td&gt;
          &lt;td id="13"&gt;1PM&lt;/td&gt;
          &lt;td id="14"&gt;2PM&lt;/td&gt;
          &lt;td id="15"&gt;3PM&lt;/td&gt;
          &lt;td id="16"&gt;4PM&lt;/td&gt;
          &lt;td id="17"&gt;5PM&lt;/td&gt;
          &lt;td id="18"&gt;6PM&lt;/td&gt;
          &lt;td id="19"&gt;7PM&lt;/td&gt;
          &lt;td id="20"&gt;8PM&lt;/td&gt;
      &lt;/tr&gt; 
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically i will get json array of time slots that are occupied for the given day. The problem comes when the slot span more than or less than 1hour. The time slots are allotted in multiple's 30 mins.</p>
  
  <p>Like <code>{start:10,end:11.30},{start:12,end:12.30},{start:14.30,end:15}</code></p>
  
  <p>Looking for some pointers how to handle these kind of cases.</p>
  
  <p>Sample Output : <a href="https://i.stack.imgur.com/lku5Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lku5Z.png" alt="enter image description here"></a></p>