javascript - 이미지를 동적으로 UI에 표시하는 방법은 무엇입니까?



jquery html (1)

이런 식으로 해봐.

HTML 이미지를 포맷팅하는 새로운 기능을 소개했습니다. 그런 다음 길이와 루프를 가져 와서 cnt (count) 변수를 도입하고이를 증가시킵니다. 모듈로를 사용하여 번호를 찾고 이미지를 반복했습니다.

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>

나는 HTML 테이블과 이미지로 구성된 화면을 보여주고있다. 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 는 2 개의 이미지 또는 3을 가질 수 있습니다. 따라서 페이지가로드 될 때 어떤 이미지가 다음과 같은 객체에로드 var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]} Counter A 두 개의 이미지가 다른 카운터에도 있습니다. 그래서 무엇을하려고합니까? 먼저 테이블을로드하십시오. 테이블을로드 할 때 첫 번째 이미지 를 표시하려고 할 때 완료되었습니다. 이미지 를 표시하는 것보다 이미지를로드하는 것보다 이미지 2입니다. 어레이 내부에서 이미지 링크가 있으면 내 문제는 한 번에 하나의 이미지 만 표시하는 것입니다.

작업 과정

테이블 로딩 -> 3seconds 후 -> 테이블의 마지막 페이지까지 다음 3 행 -> Image1 (CounterA1.jpg) 표시 -> 테이블 다시로드 -> show Image2 (CounterA2.jpg) -> 다시 테이블 -> Image1이 두 개 뿐이므로 다시 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, table -> Image2하지만 여기 두 테이블 아래에있는 이미지가 다른 하나 아래 렌더링됩니다 내 스니피를 확인하시기 바랍니다

내 이미지 렌더링 방법입니다.





html-table