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