javascript - 如果没有要显示的数据，则传递到下一次迭代

Question

我正在处理 HTML 表格并一个接一个地显示图像，因为这里的 UI 有点复杂我正在展示它是如何工作的

如果有不止一张图片：-

• 它显示为 table-->image1-->table-->image2

如果只有一个 Image 而不是 table-->image1-->table->image2

所以我从数据库中调用我的图像，所以如果数据库中存在图像，那么我将 JSON 调用为var images = {"": ["CountA1.jpg", "CountA2.jpg"], }

如果 db 中没有数据，我将调用一个空 JSON var images = {"":[""]}，那么当没有数据时我想要做什么我不想显示图像它应该跳过该图像部分，至于显示我给出的表格和图像有一段时间

• 表将在 Ui 上而5seconds不是 Image 上5seconds，这里当没有数据时，因为我得到空 Image 它显示图像alt value并显示 5 秒，如果没有图像，只有表格应该像如何填充一样，我不想要这种情况它被填充为一个缺口5-5 seconds

var imgLen = 0;
var cnt = 0;

var tableValue = [{
  "Item Name": "MANCHOW  V SOUP",
  "SellingPrice": 100
}, {
  "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"]
}
initTable(tableValue);

function initTable(tableValue) {
  addTable(tableValue)
  showRows();
  imageFormatter();
  interval = window.setInterval(showRows, 5000); // seting interval to show table in parts
}




function hideImage() {
  var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
  console.log(imgno)
  $("#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);
  }, 5000);
  cnt++;
}





function showRows() {
  // Any TRs that are not hidden and not already shown get "already-shown" applies
  if ($(".hidden:lt(10)").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(10)").removeClass("hidden"); // this one is to hide previous  rows and show next 
}

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table fixed table-bordered"
    }),
    $tb = $("<tbody/>"),
    $trh = $("<tr/>");

  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      class: "hidden w3-animate-zoom"
    });

    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);

}



function imageFormatter() {

  var images = {
    "": [""]
  }
  // var images = {"": ["CountA1.jpg", "CountA2.jpg"], }  

  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': 'No Image to Display',
        '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>

如果需要任何其他 JSON 格式而不是我可以调用的，我只想让它在没有图像时不显示图像

标签： javascriptjqueryhtmlcss