>source

HTML 테이블 작업을하고 있습니다. 여기에서는 표를 만들고 디스플레이 화면에 표시하기 위해 4 개의 열로 분할했습니다. 표는 완전히 동적입니다.

이제해야 할 일은 한 번에 5 개의 행을 화면에 표시하는 것입니다. CSS를 사용하여 그렇게하고 있습니다. 내가하고있는 일은 한 번에 테이블을 만들고 처음 5 행을 한 번에 채우는 것입니다. 5 초 후에 콘텐츠가 새로 고침되고 다음 5 행을 표시해야합니다. 모든 데이터가로드 될 때까지 계속됩니다.

내가 시도한 것

var tableValue = [{
    "Item Name": "MANCHOW  V SOUP",
    "SellingPrice": 100
  },
  {
    "Item Name": "MANCHOW NV SOUP ",
    "SellingPrice": 125
  },
  {
    "Item Name": "CEASER SALAD V",
    "SellingPrice": 175
  },
  {
    "Item Name": "CEASER SALAD NV",
    "SellingPrice": 230
  },
  {
    "Item Name": "GAMBUS REBOZADAS",
    "SellingPrice": 350
  },
  {
    "Item Name": "PANCO FISH FINGER",
    "SellingPrice": 270
  },
  {
    "Item Name": "MUSHROOM DUPLEX",
    "SellingPrice": 160
  },
  {
    "Item Name": "FRENCH FRIES",
    "SellingPrice": 99
  },
  {
    "Item Name": "HONEY GARLIC PRAWN",
    "SellingPrice": 350
  },
  {
    "Item Name": "CHICKEN MANCHURIAN",
    "SellingPrice": 180
  },
  {
    "Item Name": "MUSHROOM CHILLY",
    "SellingPrice": 120
  },
  {
    "Item Name": "SALT N PEPPER BABY CORN",
    "SellingPrice": 120
  },
  {
    "Item Name": "SOUTHERN STYLE CHICKEN",
    "SellingPrice": 210
  },
  {
    "Item Name": "PANEER NAGGETS",
    "SellingPrice": 210
  },
  {
    "Item Name": "HARA BHARA KEBAB",
    "SellingPrice": 160
  },
  {
    "Item Name": "CHICKEN TIKKA",
    "SellingPrice": 210
  },
  {
    "Item Name": "KALMI KEBAB",
    "SellingPrice": 250
  },
  {
    "Item Name": "PIZZA MARGARITTA",
    "SellingPrice": 200
  },
  {
    "Item Name": "PIZZA VEG FARMHOUSE",
    "SellingPrice": 200
  },
  {
    "Item Name": "BBQ CHICKEN PIZZA",
    "SellingPrice": 225
  },
  {
    "Item Name": "CHICKEN TIKKA PIZZA",
    "SellingPrice": 225
  },
  {
    "Item Name": "PESTO SAUCE",
    "SellingPrice": 175
  },
  {
    "Item Name": "ARABIATA",
    "SellingPrice": 160
  },
  {
    "Item Name": "PINK SAUCE",
    "SellingPrice": 160
  },
  {
    "Item Name": "GARBANZO BEAN SALAD",
    "SellingPrice": 90
  },
  {
    "Item Name": "MASALA PAPAD",
    "SellingPrice": 50
  },
  {
    "Item Name": "PEANUT MASALA",
    "SellingPrice": 60
  },
  {
    "Item Name": "GAJAR KA HALWA",
    "SellingPrice": 90
  },
  {
    "Item Name": "WATERMELON MARTINI",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Kiwi martini",
    "SellingPrice": 281.25
  },
  {
    "Item Name": " Apple gin",
    "SellingPrice": 225
  },
  {
    "Item Name": "Cucumber  cooler ",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Martini",
    "SellingPrice": 225
  },
  {
    "Item Name": "Pink lady",
    "SellingPrice": 225
  },
  {
    "Item Name": " Bloody marry",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Cosmopolitan",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Sex on the beach",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Bull frog",
    "SellingPrice": 506.25
  },
  {
    "Item Name": "Long  island iced tea ",
    "SellingPrice": 393.75
  },
  {
    "Item Name": "Pinacolada",
    "SellingPrice": 225
  },
  {
    "Item Name": "Daiquiri",
    "SellingPrice": 225
  },
  {
    "Item Name": "Mojito ",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Whisky sour",
    "SellingPrice": 281.25
  },
  {
    "Item Name": "Hot toddy",
    "SellingPrice": 225
  },
  {
    "Item Name": "Margarita",
    "SellingPrice": 337.5
  },
  {
    "Item Name": "Tequila sunrise",
    "SellingPrice": 337.5
  },
  {
    "Item Name": "Red sangria",
    "SellingPrice": 225
  },
  {
    "Item Name": "White sangria",
    "SellingPrice": 247.5
  },
  {
    "Item Name": "Rose sangria",
    "SellingPrice": 247.5
  },
  {
    "Item Name": "By chance special ",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Made in heaven",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Strawberry delight",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "DRAGON",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Mangochil ",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Cucumber cola",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Virgin mojito",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Virgin mary",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "Virgin pinacolada",
    "SellingPrice": 168.75
  },
  {
    "Item Name": "CORONA",
    "SellingPrice": 438.75
  },
  {
    "Item Name": "CRAFT BEERS",
    "SellingPrice": 337.5
  },
  {
    "Item Name": "BIRA WHITE 330",
    "SellingPrice": 157.5
  },
  {
    "Item Name": "BIRA BLONDE 330",
    "SellingPrice": 135
  },
  {
    "Item Name": "BIRA STRONG 650",
    "SellingPrice": 213.75
  },
  {
    "Item Name": "KINGFISHER PREMIUM 330",
    "SellingPrice": 123.75
  },
  {
    "Item Name": "KINGFISHER PREMIUM 650",
    "SellingPrice": 202.5
  },
  {
    "Item Name": "KINGFISHER PREMIUM 330",
    "SellingPrice": 123.75
  },
  {
    "Item Name": "KINGFISHER PREMIUM 650",
    "SellingPrice": 202.5
  },
  {
    "Item Name": "TESTING ITEM",
    "SellingPrice": 22
  }
]
myFun();
window.setInterval(showRows, 5000);
showRows();
function myFun() {
  addTable(tableValue);
}
function showRows() {
  $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
}
function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table"
    }),
    $tb = $("<tbody/>"),
    $trh = $("<tr/>");
  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      class: "hidden"
    }); //ading class
    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i], function(key, value) {
        $("<td/>", {
          "class": "text-left color" + (j + 1)
        }).html(value).appendTo($tr);
      });
    }
    $tr.appendTo($tb);
  }
  $tbl.append($tb);
  $("#DisplayTable").html($tbl);
}

tbody>tr>td {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 8pt;
  font-weight: bold;
  white-space: nowrap;
}
.color1 {
  background: #4AD184;
}
.color2 {
  background: #EA69EF;
}
.color3 {
  background: #E1A558;
}
.color4 {
  background: #F4F065;
}
.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="DisplayTable">
</div>

페이지를로드 할 때 완벽한 5 행을로드하지만 5 초 후에 다음 5 행이 렌더링되지만 처음 5 행은 숨겨지지 않습니다.


  • 답변 # 1

    이미 표시된 행을 추적해야합니다. 따라서 "hidden"과는 다른 display: none 를 사용하는 새로운 CSS 클래스를 작성하십시오. . 여기에서는 "이미 표시"를 사용했습니다.

    각 간격마다 해당 클래스를 숨기지 않고 아직 표시되지 않은 행에 적용하십시오.

    var tableValue = [{
        "Item Name": "MANCHOW  V SOUP",
        "SellingPrice": 100
      },
      {
        "Item Name": "MANCHOW NV SOUP ",
        "SellingPrice": 125
      },
      {
        "Item Name": "CEASER SALAD V",
        "SellingPrice": 175
      },
      {
        "Item Name": "CEASER SALAD NV",
        "SellingPrice": 230
      },
      {
        "Item Name": "GAMBUS REBOZADAS",
        "SellingPrice": 350
      },
      {
        "Item Name": "PANCO FISH FINGER",
        "SellingPrice": 270
      },
      {
        "Item Name": "MUSHROOM DUPLEX",
        "SellingPrice": 160
      },
      {
        "Item Name": "FRENCH FRIES",
        "SellingPrice": 99
      },
      {
        "Item Name": "HONEY GARLIC PRAWN",
        "SellingPrice": 350
      },
      {
        "Item Name": "CHICKEN MANCHURIAN",
        "SellingPrice": 180
      },
      {
        "Item Name": "MUSHROOM CHILLY",
        "SellingPrice": 120
      },
      {
        "Item Name": "SALT N PEPPER BABY CORN",
        "SellingPrice": 120
      },
      {
        "Item Name": "SOUTHERN STYLE CHICKEN",
        "SellingPrice": 210
      },
      {
        "Item Name": "PANEER NAGGETS",
        "SellingPrice": 210
      },
      {
        "Item Name": "HARA BHARA KEBAB",
        "SellingPrice": 160
      },
      {
        "Item Name": "CHICKEN TIKKA",
        "SellingPrice": 210
      },
      {
        "Item Name": "KALMI KEBAB",
        "SellingPrice": 250
      },
      {
        "Item Name": "PIZZA MARGARITTA",
        "SellingPrice": 200
      },
      {
        "Item Name": "PIZZA VEG FARMHOUSE",
        "SellingPrice": 200
      },
      {
        "Item Name": "BBQ CHICKEN PIZZA",
        "SellingPrice": 225
      },
      {
        "Item Name": "CHICKEN TIKKA PIZZA",
        "SellingPrice": 225
      },
      {
        "Item Name": "PESTO SAUCE",
        "SellingPrice": 175
      },
      {
        "Item Name": "ARABIATA",
        "SellingPrice": 160
      },
      {
        "Item Name": "PINK SAUCE",
        "SellingPrice": 160
      },
      {
        "Item Name": "GARBANZO BEAN SALAD",
        "SellingPrice": 90
      },
      {
        "Item Name": "MASALA PAPAD",
        "SellingPrice": 50
      },
      {
        "Item Name": "PEANUT MASALA",
        "SellingPrice": 60
      },
      {
        "Item Name": "GAJAR KA HALWA",
        "SellingPrice": 90
      },
      {
        "Item Name": "WATERMELON MARTINI",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Kiwi martini",
        "SellingPrice": 281.25
      },
      {
        "Item Name": " Apple gin",
        "SellingPrice": 225
      },
      {
        "Item Name": "Cucumber  cooler ",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Martini",
        "SellingPrice": 225
      },
      {
        "Item Name": "Pink lady",
        "SellingPrice": 225
      },
      {
        "Item Name": " Bloody marry",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Cosmopolitan",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Sex on the beach",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Bull frog",
        "SellingPrice": 506.25
      },
      {
        "Item Name": "Long  island iced tea ",
        "SellingPrice": 393.75
      },
      {
        "Item Name": "Pinacolada",
        "SellingPrice": 225
      },
      {
        "Item Name": "Daiquiri",
        "SellingPrice": 225
      },
      {
        "Item Name": "Mojito ",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Whisky sour",
        "SellingPrice": 281.25
      },
      {
        "Item Name": "Hot toddy",
        "SellingPrice": 225
      },
      {
        "Item Name": "Margarita",
        "SellingPrice": 337.5
      },
      {
        "Item Name": "Tequila sunrise",
        "SellingPrice": 337.5
      },
      {
        "Item Name": "Red sangria",
        "SellingPrice": 225
      },
      {
        "Item Name": "White sangria",
        "SellingPrice": 247.5
      },
      {
        "Item Name": "Rose sangria",
        "SellingPrice": 247.5
      },
      {
        "Item Name": "By chance special ",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Made in heaven",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Strawberry delight",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "DRAGON",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Mangochil ",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Cucumber cola",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Virgin mojito",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Virgin mary",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "Virgin pinacolada",
        "SellingPrice": 168.75
      },
      {
        "Item Name": "CORONA",
        "SellingPrice": 438.75
      },
      {
        "Item Name": "CRAFT BEERS",
        "SellingPrice": 337.5
      },
      {
        "Item Name": "BIRA WHITE 330",
        "SellingPrice": 157.5
      },
      {
        "Item Name": "BIRA BLONDE 330",
        "SellingPrice": 135
      },
      {
        "Item Name": "BIRA STRONG 650",
        "SellingPrice": 213.75
      },
      {
        "Item Name": "KINGFISHER PREMIUM 330",
        "SellingPrice": 123.75
      },
      {
        "Item Name": "KINGFISHER PREMIUM 650",
        "SellingPrice": 202.5
      },
      {
        "Item Name": "KINGFISHER PREMIUM 330",
        "SellingPrice": 123.75
      },
      {
        "Item Name": "KINGFISHER PREMIUM 650",
        "SellingPrice": 202.5
      },
      {
        "Item Name": "TESTING ITEM",
        "SellingPrice": 22
      }
    ]
    myFun();
    window.setInterval(showRows, 5000);
    showRows();
    function myFun() {
      addTable(tableValue);
    }
    function showRows() {
      // Any TRs that are not hidden and not already shown get "already-shown" applied
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
      // Then your previous code 
      $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
    }
    function addTable(tableValue) {
      var $tbl = $("<table />", {
          "class": "table"
        }),
        $tb = $("<tbody/>"),
        $trh = $("<tr/>");
      var split = Math.round(tableValue.length / 4);
      for (i = 0; i < split; i++) {
        $tr = $("<tr/>", {
          class: "hidden"
        }); //ading class
        for (j = 0; j < 4; j++) {
          $.each(tableValue[split * j + i], function(key, value) {
            $("<td/>", {
              "class": "text-left color" + (j + 1)
            }).html(value).appendTo($tr);
          });
        }
        $tr.appendTo($tb);
      }
      $tbl.append($tb);
      $("#DisplayTable").html($tbl);
    }
    
    
    tbody>tr>td {
      white-space: nowrap;
      border-collapse: collapse;
      font-family: Verdana;
      font-size: 8pt;
      font-weight: bold;
      white-space: nowrap;
    }
    .color1 {
      background: #4AD184;
    }
    .color2 {
      background: #EA69EF;
    }
    .color3 {
      background: #E1A558;
    }
    .color4 {
      background: #F4F065;
    }
    /* added .already-shown to have the same properties as hidden */
    .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="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <div id="DisplayTable">
    </div>
    
    

  • 답변 # 2

    showRows () 함수는 숨겨진 클래스 만 제거하고 이전 5 개는 숨기지 않습니다. 그리고 선택기는 숨겨진 클래스가있는 요소를 기반으로합니다. 따라서 이전 5 개를 숨겨도 해당 5 개 항목 만 다시 표시됩니다. 이 문제를 해결하는 쉬운 방법은 각 테이블 행에 색인을 제공하고 색인을 기준으로 항목을 숨기거나 선택기를 다시 표시하여 표시하려는 5 개를 선택하는 것입니다.

  • 이전 node.js - 기본값이있는 JavaScript JSON API 파서?
  • 다음 java - 프로그래밍 방식으로 그릴 수있는 XML 파일로 항목 매개 변수를 설정할 수 있습니까?