<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="show" style="margin: 0 auto;width: 900px;">
</div>
</body>
</html>
<script src="jQuery-3.5.1.min.js"></script>
<script>
//页面加载
$(function(){
//触发ajax
$.ajax({
type:"get",
url:"http://api.k780.com/?app=weather.future&weaId=1&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json",
dataType:"json",
success:function(res){
if(res.success == 1){
var data = res.result;
var str = "<table>";
str += "<th>城市</th>";
str += "<th>日期</th>";
str += "<th>温度</th>";
str += "<th>风向</th>";
str += "<th>操作</th>";
for(var i=0;i<data.length;i++){
str += "<tr><td>"+data[i].citynm+"</td><td>"+data[i].days+"</td><td>"+data[i].temperature+"</td><td>"+data[i].wind+"</td><td><button class='del'>删除</button></td></tr>";
}
str+="</table>";
$("#show").html(str);
$("tr:odd").css('background-color','red');
$("tr:even").css('background-color','blue');
$("tr:eq(0)").css('background-color','');
$("table").css('border','1px solid red');
}else{
console.log('接口请求失败');
}
}
});
// 删除
$("#show").on('click','.del',function(){
var res = confirm('您确定要删除吗？');
if(res){
$(this).parent().parent().remove();
}
});
})
</script>
