我遇到一个问题,我需要从外部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"> </th>
<th id="tbl241id0_1" scope="col"> Conditions</th>
<th id="tbl241id0_2" scope="col"> Temp (max/min)</th>
<th id="tbl241id0_3" scope="col"> Sun (rise/set)</th>
<th id="tbl241id0_4" scope="col"> Moon (rise/set)</th>
<th id="tbl241id0_5" scope="col"> UV Index</th>
</tr>
</thead>
<tbody>
<tr>
<th id="tbl241id1_0" scope="row"> Tue 04 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 5°C / 4°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:05 am / 4:04 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 8:04 am / 4:23 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Wed 05 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 6°C / 3°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:05 am / 4:06 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 8:04 am / 5:35 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Thu 06 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 5°C / 2°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:04 am / 4:07 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 8:59 am / 6:46 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Fri 07 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/67.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 8°C / 2°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:04 am / 4:08 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 9:18 am / 7:56 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Sat 08 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 7°C / 2°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:04 am / 4:09 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 9:35 am / 9:04 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Sun 09 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/85.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 5°C / 2°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:03 am / 4:11 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 9:50 am / 10:10 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 0 (Low)</td>
</tr>
<tr>
<th id="tbl241id1_0" scope="row"> Mon 10 Jan</th>
<td headers="tbl241id1_0 tbl241id0_1"> <img src="https://live.whatsonwhen.com/img/weather/66.gif" width="26" height="24" alt="" border="0" /></td>
<td headers="tbl241id1_0 tbl241id0_2"> 4°C / 1°C</td>
<td headers="tbl241id1_0 tbl241id0_3"> 8:03 am / 4:12 pm</td>
<td headers="tbl241id1_0 tbl241id0_4"> 10:05 am / 11:17 pm</td>
<td headers="tbl241id1_0 tbl241id0_5"> 1 (Low)</td>
</tr>
</tbody>
</table>
</div>
为此,我正在考虑使用.map()
选择器,但不知道如何使用外部HTML表。
一旦被拉入,我必须设计它以实现这种结构:
日期 图 温度
它需要在整个页面中以5列的形式流动,而不是垂直向下流动。
谢谢