我试图弄清楚如何从网络服务器加载图像,用于这个 JS 中的数组“logo”。不是一个大的 JS 向导,也无法解决这个问题。
该脚本在检测到更改事件“选择”时动态填充表格单元格并将其写入表格的不同列。仅仅加载一张图片就让我头疼。
整个代码包括表格在myjsfiddle
var data = {
"details":
{
"info": [
{
"name": "Prod1",
"logo": "P1 Logo",
"d1": "Specs of this",
"d2": "Some Details",
"d3": "More text about this",
"d4": "Even more details here",
"rating": "3 stars"
},
{
"name": "Prod2",
"logo": "P2 Logo",
"d1": "Specs here",
"d2": "Details go here",
"d3": "wow, more text",
"d4": "Even more text and details",
"rating": "1 stars"
},
{
"name": "Prod3",
"logo": "P3 Logo",
"d1": "Specs and stuff",
"d2": "Details or some other things",
"d3": "More details go here wow",
"d4": "Almost forgot - more here",
"rating": "5 stars"
},
{
"name": "Prod4",
"logo": "P4 Logo",
"d1": "Specs, stuff etc",
"d2": "Some other things",
"d3": "What should I say",
"d4": "details go here wow",
"rating": "4 stars"
}
]}
};
$(".select").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
whichCol = "col2";
} else if
(jthis.hasClass("col3")) {
whichCol = "col3";
} else if
(jthis.hasClass("col4")) {
whichCol = "col4";
}
$.each(data.details.info, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});