Yahoo!からデータを取得しているWebページがあります。WeatherAPI。私はこのクエリを使用しています。IDを持つ要素を挿入するjQueryを使用してテーブルを作成したいと思います。これが私の現在のコードです：
$.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22canberra%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(data) {
$("#title").append(data.query.results.channel.title);
$("#sunrise").append(data.query.results.channel.astronomy.sunrise);
$("#sunset").append(data.query.results.channel.astronomy.sunset);
$("#title-2").append(data.query.results.channel.item.title);
for (var i = 0; i < 10; i += 1) {
var newRow = $("<tr></tr>").attr("id", "row-" + (i + 1));
var newDate = $("<td></td>").attr("id", "date-" + (i + 1));
var newMin = $("<td></td>").attr("id", "min-" + (i + 1));
var newMax = $("<td></td>").attr("id", "max-" + (i + 1));
var newConditions = $("<td></td>").attr("id", "conditions-" + (i + 1));
$("#weather").append(newRow);
$("#row-" + (i + 1)).append(newDate, newMin, newMax, newConditions);
$("#date-" + (i + 1)).append(data.query.results.channel.item.forecast[i].day + " " + data.query.results.channel.item.forecast[i].date);
$("#min-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].low) - 32) / 1.8)) + "°C");
$("#max-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].high) - 32) / 1.8)) + "°C");
$("#conditions-" + (i + 1)).append(data.query.results.channel.item.forecast[i].text);
}
$("#lastBuild").append(data.query.results.channel.lastBuildDate);
}, "json");div#main {
width: 595px;
}
table#weather {
border-collapse: collapse;
width: 595px;
}
table#headers {
width: 595px;
}
td,
th {
width: 148.75px;
text-align: center;
}
tr {
height: 28px;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="main">
<h1 id="title"></h1>
<ul id="sun">
<li id="sunrise"><strong>Sunrise: </strong></li>
<li id="sunset"><strong>Sunset: </strong></li>
</ul>
<h2 id="title-2"></h2>
<table id="headers">
<tr>
<th id="date">Date</th>
<th id="min">Min</th>
<th id="max">Max</th>
<th id="conditions">Conditions</th>
</tr>
</table>
<table id="weather" border="1"></table>
<br />
</div>
<em id="lastBuild">Data last built at: </em>私はこれを行う正しい方法について行っていますか？動作しますが、インタプリタによる自動入力である可能性があります（セミコロンを省略するなど）。これは正しいですか、そうでない場合は、どうすれば修正できますか？すべての助けに感謝します。
現在、私には良さそうです。ページが情報を一度だけクエリする場合は、現在機能している限り問題ありません。複数のクエリを許可する場合（ユーザーが日付を選択し、ボタンを押して別の日の情報を取得できるようにするなど）、新しいアイテムを追加するempty前に、関連する要素を指定するappendことをお勧めします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加