javascript - with - td and tr



Como exibir dinamicamente a imagem na interface do usuário? (1)

Eu estou trabalhando em exibindo uma tela que é composta de tabela HTML e imagem, uma tabela HTML é totalmente dinâmica.

Processo de trabalho de código

Quando o usuário está carregando uma página (com URL) estou processando uma tabela HTML em partes diferentes, o que significa que a página é carregada. Estou recebendo todos os dados da tabela no formato 'JSON' de uma vez e, em seguida, mostrando 3-3 linhas de cada vez na UI do UI no intervalo (intervalo) de 3 seconds quando a tabela completa está carregada Então estou mostrando a imagem há algum tempo e depois disso novamente carregando a tabela e mostrando a imagem uma vez que a tabela é carregada, então está funcionando bem, agora o que estou tentando fazer é mostrar a imagem dinamicamente

O que estou tentando fazer

Atualmente estou fazendo como <img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345"> porque havia apenas uma Imagem para Mostrar na pasta, mas agora Counter A tem duas imagens ou 3 ou o que quer que seja Assim, quando a página está carregando, estou obtendo a imagem que deve ser carregada em um objeto como este var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]} para o contador A existem duas imagens da mesma forma para outros contadores também, então o que eu estou tentando fazer é carregar a tabela em primeiro lugar, quando carregando mesa concluída tentando mostrar primeiro Imagem do que novamente carregar tabela do que mostrar Tenho link de imagens dentro de uma matriz, meu único problema é mostrar uma imagem de cada vez

Processo de trabalho

Carregamento da tabela -> após 3 segundos -> próximos 3 linhas da tabela até a última página da tabela -> show Image1 (CounterA1.jpg) -> carregar tabela novamente -> show Image2 (CounterA2.jpg) -> então novamente tabela -> então novamente Image1 porque existem apenas duas imagens

Eu já fiz mostrando tabela HTML e mostrando imagem com apenas uma imagem e estaticamente agora eu quero fazer isso dinamicamente

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>

Eu comentei todas as linhas no meu código JS para melhor compreensão, aqui como você pode ver na minha imagem de image enviada é pasta comum para que eu possa configurá-lo manualmente em src e contador e sua imagem eu estou ficando assim var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}

Editar

eu adicionei abaixo 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'); 
                 }

            }

Eu fiz um pouco mais Eu acho que estou perto de obter o resultado esperado, A questão é que está mostrando uma imagem abaixo da outra que não é verdade o que eu estou tentando fazer é quando existem duas imagens, em seguida, tabela -> Image1, tabela -> Image2 mas aqui, depois da tabela, ambas as imagens estão renderizando uma abaixo da outra, por favor, verifique meu snippet

É assim que minha imagem está renderizando

E


Tente assim.

Eu introduzi uma nova função para formatar a imagem em HTML . e, em seguida, obteve seu comprimento e loop introduziu uma variável cnt (count) e fez com que ela aumentasse. e usei o módulo para encontrar o número e repeti as imagens.

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-table