My current project involves displaying a screen with an HTML table and an image. The HTML table is fully dynamic.
The Code Working Process
When the user loads a page (with a URL), I render an HTML table in different parts as the page loads. I retrieve all the table data in JSON format at once and display 3 rows at a time on the UI, with an interval of 3 seconds between each set. Once the full table is loaded, I show an image for some time before loading the table again and displaying another image. Everything works fine, but now I want to dynamically display multiple images.
What I'm Trying to Achieve
Previously, I only had one static image to display using
<img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345">The Working Process
Here is the sequence: Table loading -> displaying 3 rows every 3 seconds until the end -> showing Image1 (CounterA1.jpg) -> reloading the table -> showing Image2(CounterA2.jpg) -> repeating the cycle of table reload and image display.
I have already successfully displayed the HTML table and one static image. Now, I aim to achieve this dynamically.
// JavaScript code snippet
var tableValue = [{
// Table value objects here
}];
// Function to initialize the table
function initTable(tableValue) {
addTable(tableValue)
interval = window.setInterval(showRows, 3000);
}
// Function to handle hiding the image and showing the table
function hideImage() {
$("#displayImage").show();
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 3000);
}
// Rest of the functions are similar for handling table rows and image display
// Initial call to start the process
initTable(tableValue);
// CSS styles for the table
tbody>tr>td {
// Styles for table cells
}
// More CSS styles for table cell colors, widths, etc.
.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>In order to dynamically display multiple images based on the counter, I have stored the image information in an object like this:
var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}Edit:
I have added the following code snippet to address this issue:
// Further JavaScript code for iterating through image array and displaying the images
var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]};
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],
'alt': 'Some Image',
'width': '90%',
'height': 680
}).appendTo('#displayImage');
}
}
I have made progress towards achieving my goal, but the issue I currently face is that the images are rendering one below the other instead of alternating between them. Each table should be followed by the corresponding image, but they are currently stacked vertically. Please review the provided snippets for more clarity.
Here is how the current image rendering looks: https://i.stack.imgur.com/9syTo.png
And another image reference: https://i.stack.imgur.com/o7Pm2.png
Additional image reference: https://i.stack.imgur.com/osghJ.png