title: Inserting XML data into a table at certain location
body: <p>I'm developing a simple TV guide for use in browsers.</p>
  
  <p>My current HTML draws the table with the scheduled times and also displays the channel names on the left hand side</p>
  
  <p>I would like to know what the best way to insert films into this HTML table at the correct times using my XML film data</p>
  
  <p>I've been trying to load my XML data using the tutorial here</p>
  
  <p><a href="http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table" rel="nofollow">http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table</a></p>
  
  <p>And insert the data at appropriate part in table using this</p>
  
  <p><a href="http://www.w3schools.com/jsref/met_table_insertrow.asp" rel="nofollow">http://www.w3schools.com/jsref/met_table_insertrow.asp</a></p>
  
  <p>Heres my </p>
  
  <p>HTML Code:</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  
     &lt;html&gt;
  
     &lt;!--HEADER CONTENT--&gt;
  
     &lt;head&gt;
      &lt;title&gt;My website&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
  
      &lt;div class="page-title"&gt;
          &lt;p&gt;TV Guide&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;!-- MAIN BODY --&gt;
  
  &lt;body&gt;
  
      &lt;table class="tv-planner"&gt;
          &lt;tr&gt;
              &lt;th class = "information"&gt;Channel&lt;/th&gt;
              &lt;th class="times"&gt;9AM&lt;/th&gt;
              &lt;th class="times"&gt;10AM&lt;/th&gt;
              &lt;th class="times"&gt;11AM&lt;/th&gt;
              &lt;th class="times"&gt;12PM&lt;/th&gt;
              &lt;th class="times"&gt;1PM&lt;/th&gt;
              &lt;th class="times"&gt;2PM&lt;/th&gt;
              &lt;th class="times"&gt;3PM&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;th class = "information"&gt;Channel 1&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;th class = "information"&gt;Channel 2&lt;/th&gt;
          &lt;/tr&gt;
  
                  &lt;tr&gt;
              &lt;th class = "information"&gt;Channel 4&lt;/th&gt;
          &lt;/tr&gt;
  
                  &lt;tr&gt;
              &lt;th class = "information"&gt;Sky One&lt;/th&gt;
          &lt;/tr&gt;
  
                  &lt;tr&gt;
              &lt;th class = "information"&gt;Channel Five&lt;/th&gt;
          &lt;/tr&gt;
  
  
      &lt;/table&gt;
  
      &lt;button onclick="myFunction()"&gt;Update TV-guide&lt;/button&gt;
  
      &lt;script&gt;
  
          function myFunction() {
  
              // Code to read XML file + insert into existing table 
          }
  
      &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>XML code:</p>
  
  
  
  <pre><code>&lt;MOVIE_DATA&gt;
  
      &lt;MOVIE&gt;
          &lt;movie_id="1"&gt;
          &lt;channel_1&gt;
              &lt;name&gt;Simpsons&lt;/name&gt;
              &lt;start_time&gt;10.00am&lt;/start_time&gt;
              &lt;end_time&gt;1.00pm&lt;/end_time&gt;
          &lt;/sean_channel&gt;
      &lt;/MOVIE&gt;
  
      &lt;MOVIE&gt;
          &lt;movie_id="2"&gt;
          &lt;roger_channel&gt;
              &lt;name&gt;Suits&lt;/name&gt;
              &lt;start_time&gt;9.00am&lt;/start_time&gt;
              &lt;end_time&gt;12.00pm&lt;/end_time&gt;
          &lt;/roger_channel&gt;
      &lt;/MOVIE&gt;
  
      &lt;MOVIE&gt;
          &lt;movie_id="3"&gt;
          &lt;sean_channel&gt;
              &lt;name&gt;Mighty Boosh&lt;/name&gt;
              &lt;start_time&gt;1.00pm&lt;/start_time&gt;
              &lt;end_time&gt;2.00pm&lt;/end_time&gt;
          &lt;/sean_channel&gt;
      &lt;/MOVIE&gt;
  
  &lt;/MOVIE_DATA&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main-area{
      font-style: italic;
  }
  
  
  .page-title{
  
      text-align: center;
      font-style: italic;
      font-size: 50px;
      text-shadow: hoff voff blur #000;
  
  }
  
  .times{
      width: 11%;
      text-align: center;
      color: #FF0000;
      background-color: #d3d3d3;
      border: 1px solid black;
  
  }
  
  .tv-planner{
      width: 100%;
      border: 1px solid black;
  }
  
  .information{
      width: 15%;
      border: 1px solid black;
      padding-right: 10px;
      padding-left: 10px;
      padding-top: 15px;
      padding-bottom: 15px;
      background-color: #d3d3d3;
  
  }
  </code></pre>
  
  <p>Any advice on how I should approach this problem, and whether i'm onto the right idea with the resources i'm using would be really helpful</p>
  
  <p>Thanks!</p>