1

我有一个问题,我需要从外部 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 列的形式流动,而不是垂直向下流动。

谢谢

4

0 回答 0