title: Extracting certain data from external HTML table with jquery and styling with CSS
body: <p>I have a problem whereby I need to pull in data from an external HTML file and display it in a certain way.</p>
  
  <p>The external data I need is being pulled from an HTML table, I need to use jquery or javascript to do this.</p>
  
  <p>Then it needs to be styled to have the title, little picture and then the temperature (it is a weather forecasting system).</p>
  
  <p>Here is my code that pulls in the HTML:</p>
  
  <pre><code>$("#destinations").change(function () {
  
  $('#weatherForecasts').load('raw_html/' + $(this).val() + '_weather.html tbody', function      (response, status, xhr) {
        if (status == 'error'){
           $('#weatherForecasts').hide("slow");
           $('.errorMessage').show("slow");
        }else{
           $('#weatherForecasts').show("slow");
           $('.errorMessage').hide("slow");
        }
   });
  });
  </code></pre>
  
  <p>I have a <code>&lt;select&gt;</code> list with <code>id=destinations</code> and based on the selection from that list will change the weather forecast within another <code>&lt;div&gt;</code> with <code>id=weatherForecasts</code>.</p>
  
  <p>Below is the table I need to pull the data from - I only need the date, img and temperature to be pulled in, but can not figure how to only pull in that data.</p>
  
  <pre><code>&lt;div class="ngtable destinationWidth"&gt;
      &lt;h2&gt;Forecast&lt;/h2&gt;
          &lt;div class="body"&gt;
              &lt;table cellspacing="0" cellpadding="0" width="100%" summary="Data table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th id="tbl241id0_0" scope="col"&gt;&amp;#160;&lt;/th&gt;
                          &lt;th id="tbl241id0_1" scope="col"&gt;&amp;#160;Conditions&lt;/th&gt;
                          &lt;th id="tbl241id0_2" scope="col"&gt;&amp;#160;Temp (max/min)&lt;/th&gt;
                          &lt;th id="tbl241id0_3" scope="col"&gt;&amp;#160;Sun (rise/set)&lt;/th&gt;
                          &lt;th id="tbl241id0_4" scope="col"&gt;&amp;#160;Moon (rise/set)&lt;/th&gt;
                          &lt;th id="tbl241id0_5" scope="col"&gt;&amp;#160;UV Index&lt;/th&gt;
                      &lt;/tr&gt;
  
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Tue 04 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;5&amp;deg;C    &amp;#47; 4&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:05 am &amp;#47; 4:04 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;8:04 am &amp;#47; 4:23 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Wed 05 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;6&amp;deg;C    &amp;#47; 3&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:05 am &amp;#47; 4:06 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;8:04 am &amp;#47; 5:35 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Thu 06 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;5&amp;deg;C    &amp;#47; 2&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:04 am &amp;#47; 4:07 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;8:59 am &amp;#47; 6:46 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Fri 07 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;8&amp;deg;C    &amp;#47; 2&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:04 am &amp;#47; 4:08 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;9:18 am &amp;#47; 7:56 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Sat 08 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;7&amp;deg;C    &amp;#47; 2&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:04 am &amp;#47; 4:09 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;9:35 am &amp;#47; 9:04 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Sun 09 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;5&amp;deg;C    &amp;#47; 2&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:03 am &amp;#47; 4:11 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;9:50 am &amp;#47; 10:10 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;0 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;th  id="tbl241id1_0" scope="row"&gt;&amp;#160;Mon 10 Jan&lt;/th&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_1"&gt;&amp;#160;&lt;img src="https://live.whatsonwhen.com/img/weather/66.gif" width="26" height="24" alt="" border="0" /&gt;&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_2"&gt;&amp;#160;4&amp;deg;C    &amp;#47; 1&amp;deg;C&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_3"&gt;&amp;#160;8:03 am &amp;#47; 4:12 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_4"&gt;&amp;#160;10:05 am &amp;#47; 11:17 pm&lt;/td&gt;
                          &lt;td  headers="tbl241id1_0 tbl241id0_5"&gt;&amp;#160;1 (Low)&lt;/td&gt;
                      &lt;/tr&gt;
  
               &lt;/tbody&gt;
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>For this I'm thinking of using the <code>.map()</code> selector but don't know to work that with external HTML tables.</p>
  
  <p>Once it is pulled in I have to style it to achieve this structure:</p>
  
  <p>Date
  Img
  Temperature</p>
  
  <p>And it needs to flow in 5 columns across the page rather than vertically down the page.</p>
  
  <p>Thanks </p>