如何在 UI 上动态显示图像? [英] How to display Image dynamically on UI?

查看：23
本文介绍了如何在 UI 上动态显示图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在研究显示由 HTML 表格和图像组成的屏幕，HTML 表格是完全动态的.

代码工作流程

当用户加载页面(带 URL)时，我在不同部分呈现 HTML 表格，这意味着页面已加载.我一次以JSON"格式获取所有表数据，然后在 UI 上以 3 秒 的间隙(间隔)一次显示 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，因为只有两个 Image

我已经完成了显示 HTML 表格并显示只有一个图像的图像，现在我想静态地这样做

var tableValue = [{"商品名称": "MANCHOW V SOUP",售价":100}, {"商品名称": "SMIRNOFF GREEN APPLE 60",售价":202}, {"商品名称": "SMIRNOFF GREEN APPLE30",售价":101}, {"项目名称": "BOMBAY SAPHIRE 750",售价":472}, {"商品名称": "BOMBAY SAPHIRE 30",售价":191}, {"物品名称": "蓝丝带750",售价":877}, {"物品名称": "蓝丝带60",售价":78}, {"商品名称": "百家得白750",售价":248}, {"商品名称": "百家得白180",售价":585}, {"商品名称": "百家得白60",售价":202}, {"物品名称": "老僧180",售价":225}, {"物品名称": "老僧90",售价":168}, {"物品名称": "老僧60",售价":90}, {"物品名称": "老僧30",售价":45}, {"物品名称": "唐天使750",售价":466}, {"物品名称": "唐天使30",售价":191}, {"产品名称": "SAUZA SILVER 700",售价":615}, {"商品名称": "SAUZA SILVER 30",售价":270}, {"物品名称": "石灰水",售价":45}, {"商品名称": "袋装水 1L",售价":39}, {"项目名称": "大厦650",售价":900}, {"Item Name": "Chole Kulche",售价":80}, {"项目名称": "黄油楠",售价":65}, {"项目名称": "Dhai",售价":20}, {"物品名称": "米饭",售价":55}, {"物品名称": "白饭",售价":30}, {"项目名称": "大厦650",售价":900}, {"Item Name": "Chole Kulche",售价":80}, {"项目名称": "黄油楠",售价":65}, {"项目名称": "Dhai",售价":20}, {"物品名称": "米饭",售价":55}, {"物品名称": "白饭",售价":30}]间隔 = '';无功图像 = {CounterA: ["CounterA1.jpg", "CounterA2.jpg"]}//要加载到 UI 上的图像initTable(tableValue);函数 initTable(tableValue) {添加表(表值)间隔 = window.setInterval(showRows, 3000);//设置间隔以部分显示表格}函数隐藏图像(){$("#displayImage").show();//显示图片并隐藏表格$("#DisplayTable").hide();设置超时(功能(){initTable(tableValue);}, 3000);}函数 showRows() {//任何未隐藏且尚未显示的 TRs 都适用已显示"if ($(".hidden:lt(3)").length > 0) {//检查是否是最后一页$("#displayImage").hide();//显示表格隐藏图像$("#DisplayTable").show();$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");} 别的 {$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");隐藏图像()；清除间隔(间隔)；//如果最后则清除时间间隔并再次调用该函数}$(".hidden:lt(3)").removeClass("hidden");//这个是隐藏上一行显示下一行}函数添加表(表值){var $tbl = $("", {类":表固定"}),$tb = $(""),$trh = $("");var split = Math.round(tableValue.length/4);for (i = 0; i < split; i++) {$tr = $("", {课程:隐藏"});for (j = 0; j <4; j++) {$.each(tableValue[split * j + i], function(key, value) {if (typeof(value) === "number") {$("
", {"class": "text-right color" + (j + 1)}).html(value).appendTo($tr);} 别的 {$("", {"class": "text-left color" + (j + 1)}).html(value).appendTo($tr);}});}$tr.appendTo($tb);}$tbl.append($tb);$("#DisplayTable").html($tbl);无功图像 = {"计数器 A": ["计数器 A1.jpg", "计数器 A2.jpg"]}//要加载到 UI 上的图像for(图像中的var键){var imageList = 图像[key];控制台.log(imageList.length)for (i = 0; i < imageList.length; i++) {控制台.log(imageList[i])var img = $('<img/>').attr({'src': 'Image/' + key + '/' + imageList[i],//这个是在另一个下面显示一个图像'alt': '一些图片','宽度': 90 + "%",高度":680}).appendTo('#displayImage');}}}
tbody>tr>td {空白:正常；边框折叠:折叠；字体系列:Verdana；字体粗细:粗体；字体大小:.9em；}td:nth-child(2),td:nth-child(4),td:nth-child(6),td:nth-child(8) {宽度:85px；最大宽度:85px；高度:63px}.固定的 {表格布局:固定；}.color1 {背景:#4AD184；}.color2 {背景:#EA69EF；}.color3 {背景:#E1A558；}.color4 {背景:#F4F065；}.隐，.已经显示{显示:无；}
<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">
为了更好的理解，我已经注释掉了我的JS代码中的所有行，这里正如你在我上传的图片中看到的image是公共文件夹，所以我可以设置它手动在 src 和计数器和他们的图像我得到这样的 var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}
编辑
我添加了以下代码
 var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]}//要加载到 UI 上的图像for(图像中的var键){var imageList = 图像[key];控制台.log(imageList.length)for (i = 0; i < imageList.length; i++){控制台.log(imageList[i])var img = $('<img/>').attr({'src': 'Image/'+key+'/'+imageList[i] ,//这个是在另一个下面显示一个图像'alt': '一些图片','宽度': 90+"%",'高度':680}).appendTo('#displayImage');}}
我做了更多的工作，我想我已经接近获得预期的结果了，问题是它在另一个下面显示图像，这不是真的我想要做的是当有两个图像然后是表格时-->Image1, table --> Image2 但这里在 table 之后两个图像都呈现在另一个下面，请检查我的代码片段
这就是我的图像渲染的方式 
和 
 解决方案 
试试这个.
我在HTML 中引入了一个新函数来格式化图像.然后得到它的长度和循环引入一个 cnt(count) 变量并使其递增.并使用模数求出数字并重复图像.
var imgLen = 0;无功 cnt = 0;var tableValue = [{"商品名称": "MANCHOW V SOUP",售价":100}, {"商品名称": "SMIRNOFF GREEN APPLE 60",售价":202}, {"商品名称": "SMIRNOFF GREEN APPLE30",售价":101}, {"项目名称": "BOMBAY SAPHIRE 750",售价":472}, {"商品名称": "BOMBAY SAPHIRE 30",售价":191}, {"物品名称": "蓝丝带750",售价":877}, {"物品名称": "蓝丝带60",售价":78}, {"商品名称": "百家得白750",售价":248}, {"商品名称": "百家得白180",售价":585}, {"商品名称": "百家得白60",售价":202}, {"物品名称": "老僧180",售价":225}, {"物品名称": "老僧90",售价":168}, {"物品名称": "老僧60",售价":90}, {"物品名称": "老僧30",售价":45}, {"物品名称": "唐天使750",售价":466}, {"物品名称": "唐天使30",售价":191}, {"产品名称": "SAUZA SILVER 700",售价":615}, {"商品名称": "SAUZA SILVER 30",售价":270}, {"物品名称": "石灰水",售价":45}, {"商品名称": "袋装水 1L",售价":39}, {"项目名称": "大厦650",售价":900}, {"Item Name": "Chole Kulche",售价":80}, {"项目名称": "黄油楠",售价":65}, {"项目名称": "Dhai",售价":20}, {"物品名称": "米饭",售价":55}, {"物品名称": "白饭",售价":30}, {"项目名称": "大厦650",售价":900}, {"Item Name": "Chole Kulche",售价":80}, {"项目名称": "黄油楠",售价":65}, {"项目名称": "Dhai",售价":20}, {"物品名称": "米饭",售价":55}, {"物品名称": "白饭",售价":30}]间隔 = '';无功图像 = {CounterA: ["CounterA1.jpg", "CounterA2.jpg"]}//要加载到 UI 上的图像initTable(tableValue);函数 initTable(tableValue) {添加表(表值)显示行()；间隔 = window.setInterval(showRows, 1000);//设置间隔以部分显示表格}函数隐藏图像(){var imgno = (cnt%imgLen)+1;$("#displayImage img").css("display","none");$("#displayImage img:nth-child("+imgno+")").css("display","block")$("#displayImage").show();//显示图片并隐藏表格$("#DisplayTable").hide();设置超时(函数(){initTable(tableValue);}, 1000);cnt++;}函数 showRows() {//任何未隐藏且尚未显示的 TRs 都适用已显示"if ($(".hidden:lt(3)").length > 0) {//检查是否是最后一页$("#displayImage").hide();//显示表格隐藏图像$("#DisplayTable").show();$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");} 别的 {$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");隐藏图像()；清除间隔(间隔)；//如果最后则清除时间间隔并再次调用该函数}$(".hidden:lt(3)").removeClass("hidden");//这个是隐藏上一行显示下一行}函数添加表(表值){var $tbl = $("", {类":表固定"}),$tb = $(""),$trh = $("");var split = Math.round(tableValue.length/4);for (i = 0; i < split; i++) {$tr = $("", {课程:隐藏"});for (j = 0; j <4; j++) {$.each(tableValue[split * j + i], function (key, value) {if (typeof (value) === "number") {$("
", {"class": "text-right color" + (j + 1)}).html(value).appendTo($tr);} 别的 {$("", {"class": "text-left color" + (j + 1)}).html(value).appendTo($tr);}});}$tr.appendTo($tb);}$tbl.append($tb);$("#DisplayTable").html($tbl);}imageFormatter();函数 imageFormatter() {无功图像 = {"Counter A": ["CounterA1.jpg", "CounterA2.jpg"],"计数器 B": ["CounterB1.jpg", "CounterB2.jpg"]}//要加载到 UI 上的图像for(图像中的var键){var imageList = 图像[key];for (i = 0; i < imageList.length; i++) {var img = $('<img/>').attr({'src': 'Image/' + key + '/' + imageList[i],//这个是在另一个下面显示一个图像'alt': 键 + '/' + imageList[i],'宽度': 90 + "%",高度":680}).appendTo('#displayImage');}}imgLen = $("#displayImage img").length;}
tbody>tr>td {空白:正常；边框折叠:折叠；字体系列:Verdana；字体粗细:粗体；字体大小:.9em；}td:nth-child(2),td:nth-child(4),td:nth-child(6),td:nth-child(8) {宽度:85px；最大宽度:85px；高度:63px}.固定的 {表格布局:固定；}.color1 {背景:#4AD184；}.color2 {背景:#EA69EF；}.color3 {背景:#E1A558；}.color4 {背景:#F4F065；}.隐，.已经显示{显示:无；}
<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">
I am working on Displaying a screen which is consist of HTML table and Image, an HTML table is fully dynamic.



Code working process



When user is loading a page (With URL) I am rendering a HTML table in different parts which means that page is loaded. I am Getting all the table data in 'JSON' format at once and then showing 3-3 rows at a time on UI in the gap(Interval) of 3 seconds When full table is loaded Then I am showing The Image for some time and after that again loading Table and showing image once table is loaded, So it is working fine,Now what I am trying to do is Show the Image dynamically 



What I am trying to do



Currently I am doing it like <img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345"> because there was only one Image to Show in folder, but now Counter A has two Images or 3 or whatever it may be So When Page is loading I am getting the Which Image is to be loaded in object like this var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]} for Counter A there are Two Images similarly for other counters also, SO what I am trying to do is Load table first then, When loading table completed trying to show first Image than again load table than show Image 2
That's why I have Images link inside an array, my only Issue is to show one Image at a Time



Working process



Table loading -> after 3seconds -> next 3 rows of table until the last page of table -> show Image1 (CounterA1.jpg) -> load  table again -> show Image2(CounterA2.jpg) ->then again table -> then again Image1 because there are only two Images



I have already done showing HTML table and showing Image with only one Image and statically now I want to do That dynamically







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>









I have commented out all the lines in my JS code for better Understanding, here as you can see in my uploaded picture image is common folder so I can set it  manually at src and counter and their Image I am getting like this var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}



Edit



i have added below code
        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'); 
                 }

            }

I have done bit more I think I am near to get the expected result, The issue is it is showing Image one below other which is not true what I am trying to do is when there are Two Images then table --> Image1, table --> Image2 but here after table both Image are rendering one below other please check my snippet



This is how my Image is rendering 



And 



 解决方案 
Try like this.



I have introduced a new function to format image in HTML. and then got its length and loop introduced a cnt(count) variable and made it to increment. and used modulo to find the number and repeated the images.







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>








                        
这篇关于如何在 UI 上动态显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    
                    

                        查看全文
                    

                
				

                            
                        

                

            
        
        

            



        

        

            
相关文章

            
        

        

            



        

    
    

        

            
前端开发最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    



    


    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆