gpt4 book ai didi

javascript - 如何在 jQuery 中为 $.each() 创建表

转载 作者:行者123 更新时间:2023-11-28 03:54:17 24 4
gpt4 key购买 nike

我是一名初级程序员,正试图将我从 Etsy API 获得的数据结果显示到表格中,如下所示:

<tr><td>item.images</td><td><tr>item.title</tr><tr>item.price</tr></tr>

enter image description here

但是,我无法在表格中显示结果,并且在将解决方案应用于我的情况时遇到问题

这是一组工作代码,我已经注释掉了我失败的尝试。

<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#etsy-search').bind('submit', function() {
api_key = "XXXXXXXXXXXXXXXXXXXXX";
terms = $('#etsy-terms').val();
etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+
terms+"&limit=3&includes=Images:1&api_key="+api_key;

$('#etsy-images').empty();
$('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

$.ajax({
url: etsyURL,
dataType: 'jsonp',
success: function(data) {
if (data.ok) {
// Commented out are my failed attempt
//var table = "<table>";
$('#etsy-images').empty();
if (data.count > 0) {

$.each(data.results, function(i,item) {
$("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(
"<a href='" + item.url + "'></a>"
//table+='<tr><td>'+item.title+'</td><td>'+item.price+'</td></tr>';
//}
);
// table+='</table>';
// $("#etsy-images").html( table );

if (i%4 == 3) {
$('<br/>').appendTo('#etsy-images');
}
});
} else {
$('<p>No results.</p>').appendTo('#etsy-images');
}
} else {
$('#etsy-images').empty();
alert(data.error);
}
}
});

return false;
})
});

})(jQuery);
</script>

<body>
<form id="etsy-search">
<input id="etsy-terms" size="32">
<button>Search!</button>
</form>

<div id="etsy-images"></div>
</body>

附加信息:
1. 目前的结果是这样的:

enter image description here

  1. 搜索成功后,JSON 结果如下所示:

    [ { “listing_id”:123, “状态”:“活跃”, “用户 ID”:123, “类别 ID”:123, "标题": "XXX", “价格”:“2.99”, “货币代码”:“美元” .... }]

最佳答案

我最终使用 trHTML 来格式化表格:

                    var trHTML = '';
$('#etsy-table').empty();
$.each(data.results, function(i,item) {


trHTML += '<tr><td>' + '<a href="'
+ item.url +'" target="_blank" style="color: white"><img src="'
+ item.Images[0].url_75x75 + '" border="0"></a></td><td><tr>'
+ item.title + '</tr><tr>'
+ item.price + '</tr><tr><a href="'
+ vimg +'" target="_blank" style="color: white"><img class="autosizeImage"src="'
+ vimg + '" border="0"></a></tr></td></tr>';

})

$('#etsy-table').append(trHTML);

关于javascript - 如何在 jQuery 中为 $.each() 创建表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41652105/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com