javascript - 如何在UI上動態顯示圖像?
jquery html (1)
我正在開發顯示由HTML表和Image組成的屏幕,HTML表是完全動態的。
代碼工作流程
當用戶加載頁面時(使用URL)我在不同的部分呈現HTML表,這意味著加載了頁面。
我一次以“JSON”格式獲取所有表格數據,然後在間隔(間隔)為
3 seconds
UI
上一次顯示3-3行當加載完整表格時我正在顯示圖像一段時間之後再次加載表並顯示一旦表加載後的圖像,所以它工作正常,現在我要做的是動態顯示圖像
我想做什麼
目前我這樣做就像
<img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">
因為文件夾中只有一個要顯示的圖像,但現在
Counter A
有兩個圖像或3或任何它可能所以當頁面加載時我得到哪個圖像將加載到對像中,如此
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
對於計數器A有兩個圖像也類似於其他計數器,所以我想要做的是先加載表然後,當加載表完成試圖顯示
第一個圖像比再次加載表比顯示圖像2
這就是為什麼我在數組中有圖像鏈接,我唯一的問題是一次顯示一個圖像
工作流程
表加載 - > 3秒後 - >接下來3行表直到表的最後一頁 - >顯示Image1(CounterA1.jpg) - >再次加載表 - >顯示Image2(CounterA2.jpg) - >然後再次表 - >然後再次Image1,因為只有兩個圖像
我已經完成了顯示HTML表並顯示只有一個Image的圖像,現在我想動態地執行
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"Item Name": "BLUE RIBBAND 60",
"SellingPrice": 78
}, {
"Item Name": "BACCARDI WHITE 750",
"SellingPrice": 248
}, {
"Item Name": "BACCARDI WHITE 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI WHITE 60",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"Item Name": "PACKEGED WATER 1L",
"SellingPrice": 39
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}]
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
} // Images to be load on UI
initTable(tableValue);
function initTable(tableValue) {
addTable(tableValue)
interval = window.setInterval(showRows, 3000); // seting interval to show table in parts
}
function hideImage() {
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 3000);
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval); //if last then clearing time interval and calling the function again
}
$(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden "
});
for (j = 0; j < 4; j++) {
$.each(tableValue[split * j + i], function(key, value) {
if (typeof(value) === "number") {
$("<td/>", {
"class": "text-right color" + (j + 1)
}).html(value).appendTo($tr);
} else {
$("<td/>", {
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
}
});
}
$tr.appendTo($tb);
}
$tbl.append($tb);
$("#DisplayTable").html($tbl);
var images = {
"Counter A": ["CounterA1.jpg", "CounterA2.jpg"]
} // Images to be load on UI
for (var key in images) {
var imageList = images[key];
console.log(imageList.length)
for (i = 0; i < imageList.length; i++) {
console.log(imageList[i])
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': 'Some Image',
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
}
tbody>tr>td {
white-space: normal;
border-collapse: collapse;
font-family: Verdana;
font-weight: bold;
font-size: .9em;
}
td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
width: 85px;
max-width: 85px;
height: 63px
}
.fixed {
table-layout: fixed;
}
.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}
.hidden,
.already-shown {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">
</div>
我已經註釋掉了我的
JS
代碼中的所有行以便更好地理解,這裡你可以在我上傳的圖片中看到
image
是常見的文件夾,所以我可以在
src
和counter手動設置它們的圖像我得到像這樣的
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
編輯
我已添加以下代碼
var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]} // Images to be load on UI
for (var key in images) {
var imageList = images[key];
console.log(imageList.length)
for (i = 0; i < imageList.length; i++)
{
console.log(imageList[i])
var img = $('<img />').attr({
'src': 'Image/'+key+'/'+imageList[i] , // this one is displaying Image one below other
'alt': 'Some Image',
'width': 90+"%",
'height':680
}).appendTo('#displayImage');
}
}
我已經做了更多我認為我接近得到預期的結果,問題是它顯示圖像一下面的其他不正確我想要做的是當有兩個圖像然後表 - > Image1,表 - > Image2但是在這張桌子之後,這兩張圖片都在其他下方渲染一張,請查看我的片段
試試這樣吧。
我已經介紹了一種新的函數來格式化
HTML
格式的圖像。
然後得到它的長度和循環引入了一個
cnt
(count)變量並使其增加。
並使用modulo查找數字並重複圖像。
var imgLen = 0;
var cnt = 0;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"Item Name": "BLUE RIBBAND 60",
"SellingPrice": 78
}, {
"Item Name": "BACCARDI WHITE 750",
"SellingPrice": 248
}, {
"Item Name": "BACCARDI WHITE 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI WHITE 60",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"Item Name": "PACKEGED WATER 1L",
"SellingPrice": 39
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}]
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
} // Images to be load on UI
initTable(tableValue);
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
}
function hideImage() {
var imgno = (cnt%imgLen)+1;
$("#displayImage img").css("display","none");
$("#displayImage img:nth-child("+imgno+")").css("display","block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function () {
initTable(tableValue);
}, 1000);
cnt++;
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval); //if last then clearing time interval and calling the function again
}
$(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden "
});
for (j = 0; j < 4; j++) {
$.each(tableValue[split * j + i], function (key, value) {
if (typeof (value) === "number") {
$("<td/>", {
"class": "text-right color" + (j + 1)
}).html(value).appendTo($tr);
} else {
$("<td/>", {
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
}
});
}
$tr.appendTo($tb);
}
$tbl.append($tb);
$("#DisplayTable").html($tbl);
}
imageFormatter();
function imageFormatter() {
var images = {
"Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
"Counter B": ["CounterB1.jpg", "CounterB2.jpg"]
} // Images to be load on UI
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}
tbody>tr>td {
white-space: normal;
border-collapse: collapse;
font-family: Verdana;
font-weight: bold;
font-size: .9em;
}
td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
width: 85px;
max-width: 85px;
height: 63px
}
.fixed {
table-layout: fixed;
}
.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}
.hidden,
.already-shown {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>