使用jquery和使用CSS样式从外部HTML表中提取某些数据

时间:2013-09-18 16:50:54

标签: javascript jquery html css json

我遇到一个问题,我需要从外部HTML文件中提取数据并以某种方式显示它。

我需要的外部数据是从HTML表中提取的,我需要使用jquery或javascript来执行此操作。

然后需要设置标题,小图片,然后是温度(这是一个天气预报系统)。

以下是我的代码,其中包含HTML:

$("#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");
      }
 });
});

我有一个<select>列表id=destinations,根据该列表中的选择,将<div>内的天气预报更改为id=weatherForecasts

下面是我需要从中提取数据的表格 - 我只需要提取日期,img和温度,但无法确定如何仅提取数据。

<div class="ngtable destinationWidth">
    <h2>Forecast</h2>
        <div class="body">
            <table cellspacing="0" cellpadding="0" width="100%" summary="Data table">
                <thead>
                    <tr>
                        <th id="tbl241id0_0" scope="col">&#160;</th>
                        <th id="tbl241id0_1" scope="col">&#160;Conditions</th>
                        <th id="tbl241id0_2" scope="col">&#160;Temp (max/min)</th>
                        <th id="tbl241id0_3" scope="col">&#160;Sun (rise/set)</th>
                        <th id="tbl241id0_4" scope="col">&#160;Moon (rise/set)</th>
                        <th id="tbl241id0_5" scope="col">&#160;UV Index</th>
                    </tr>

                </thead>

                <tbody>
                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Tue 04 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;5&deg;C    &#47; 4&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:05 am &#47; 4:04 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;8:04 am &#47; 4:23 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Wed 05 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;6&deg;C    &#47; 3&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:05 am &#47; 4:06 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;8:04 am &#47; 5:35 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Thu 06 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;5&deg;C    &#47; 2&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:04 am &#47; 4:07 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;8:59 am &#47; 6:46 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Fri 07 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;8&deg;C    &#47; 2&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:04 am &#47; 4:08 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;9:18 am &#47; 7:56 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Sat 08 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;7&deg;C    &#47; 2&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:04 am &#47; 4:09 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;9:35 am &#47; 9:04 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Sun 09 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;5&deg;C    &#47; 2&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:03 am &#47; 4:11 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;9:50 am &#47; 10:10 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;0 (Low)</td>
                    </tr>

                    <tr>
                        <th  id="tbl241id1_0" scope="row">&#160;Mon 10 Jan</th>
                        <td  headers="tbl241id1_0 tbl241id0_1">&#160;<img src="https://live.whatsonwhen.com/img/weather/66.gif" width="26" height="24" alt="" border="0" /></td>
                        <td  headers="tbl241id1_0 tbl241id0_2">&#160;4&deg;C    &#47; 1&deg;C</td>
                        <td  headers="tbl241id1_0 tbl241id0_3">&#160;8:03 am &#47; 4:12 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_4">&#160;10:05 am &#47; 11:17 pm</td>
                        <td  headers="tbl241id1_0 tbl241id0_5">&#160;1 (Low)</td>
                    </tr>

             </tbody>

        </table>

    </div>

为此,我正在考虑使用.map()选择器,但不知道如何使用外部HTML表。

一旦被拉入,我必须设计它以实现这种结构:

日期 图 温度

它需要在整个页面中以5列的形式流动,而不是垂直向下流动。

谢谢

0 个答案:

没有答案