javascript - ¿Cómo mostrar la imagen dinámicamente en la interfaz de usuario?
jquery html (1)
Intenta de esta manera.
He introducido una nueva función para dar formato a la imagen en
HTML
.
y luego obtuvo su longitud y el bucle introdujo una variable
cnt
(cuenta) y la hizo aumentar.
y usé el módulo para encontrar el número y repitió las imágenes.
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>
Estoy trabajando en Mostrar una pantalla que consiste en una tabla HTML e Imagen, una tabla HTML es completamente dinámica.
Proceso de código de trabajo
Cuando el usuario está cargando una página (con URL), estoy renderizando una tabla HTML en diferentes partes, lo que significa que esa página está cargada.
Obtengo todos los datos de la tabla en formato ''JSON'' a la vez y luego muestro 3-3 filas a la vez en la
UI
de
UI
en el espacio (Intervalo) de
3 seconds
Cuando la tabla completa está cargada. Luego, estoy mostrando la imagen durante un tiempo y después de eso, de nuevo, se carga la tabla y se muestra la imagen una vez que se carga la tabla, así que está funcionando bien. Ahora, lo que estoy tratando de hacer es mostrar la imagen dinámicamente
Lo que estoy tratando de hacer
Actualmente lo estoy haciendo como
<img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">
porque solo había una imagen para mostrar en la carpeta, pero ahora
Counter A
tiene dos imágenes o 3 o lo que sea. Cuando la página se está cargando
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
la imagen que se cargará en un objeto como este.
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
para el Contador A, hay dos imágenes similares para otros contadores también, ASÍ que lo que estoy tratando de hacer es cargar la tabla primero y luego, cuando se carga la tabla, tratar de mostrar la
primera imagen que de nuevo cargar la tabla que mostrar la imagen 2
Es por eso que Las imágenes tienen un enlace dentro de una matriz, mi único problema es mostrar una imagen a la vez
Proceso de trabajo
Tabla de carga -> después de 3 segundos -> las siguientes 3 filas de tabla hasta la última página de tabla -> muestre Imagen1 (CounterA1.jpg) -> vuelva a cargar tabla -> muestre Imagen2 (CounterA2.jpg) -> luego nuevamente tabla -> luego otra vez Image1 porque solo hay dos imagenes
Ya he terminado de mostrar la tabla HTML y mostrar la imagen con una sola imagen y ahora quiero hacerlo de forma dinámica
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>
He comentado todas las líneas en mi código
JS
para una mejor comprensión, aquí, como puede ver en mi imagen cargada, es una carpeta común, así que puedo configurarla manualmente en
src
y counter y su imagen Me estoy pareciendo a esto
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
Editar
He añadido el siguiente código
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'');
}
}
He hecho un poco más, creo que estoy cerca de obtener el resultado esperado. El problema es que se muestra la Imagen uno debajo del otro, lo que no es cierto. Lo que estoy tratando de hacer es cuando hay dos imágenes y luego una tabla -> Imagen 1, tabla -> Image2, pero aquí, después de la tabla, ambas imágenes muestran una debajo de la otra. Por favor, compruebe mi fragmento.
