javascript - 如何在四列/网格中显示HTML表

我正在处理动态HTML表，该表是在jquery的帮助下呈现的。目前，我只是在显示表格。

我要做什么


我想将表格分为四列或网格
像这样：





我没有任何想法或方法来做到这一点

var tableValue = [{
    "Item Name": "CHICKEN BURGER PACKED ",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHICKEN CHETTINAD S/W PACKED ",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "VEG CHESSE SANDWICH PACKED ",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG PUFF",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CHANA CURRY CALZONE",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "MUSHROOM OPEN SUB",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG JALFREZI SUB ROLL",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHEESE AND CORN QUICHE (EGG)",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "MUSHROOM ONION QUICHE (EGG)",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG PINWHEEL PIZZA",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "VEGAN MEAL CUTLET PUFF",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "ALOO MATAR PUFF",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "MASALA OMLETTE SUB ROLL",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PANEER BUTTER CROISSANT",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "CHETTINAD CHICKEN ROLL",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "PUNJABI SAMOSA",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "EGG PUFF ",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "CHICKEN KHEEMA CROISSANT ",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "APPLE PIE MEDIUM",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "DONUT STICK 150 GMS",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "SUGAR DONUT",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CUSTARD  DONUT ",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CINNAMON DANISH",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHOCOLATE DONUT",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CHOCO DANISH",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "FUDGE BROWNIE",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "CHOCO VELVETTE CAKE",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "FRESH FRUIT EGGLESS",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "MANGO PASTRY",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "RED VELVET W CHEESE FROSTING",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE  PASTRY",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "DOUBLE CHOCOLATE GOURMET",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PINEAPPLE GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "BLACK FOREST EGGLESS GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PINEAPPLE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CHOCOLATE CREAM GATEAUX HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BLACK FOREST HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DUTCH TRUFFLE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "MANGO MAGNIFIQUE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DUET SWIRLS HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CARAMEL CHOCOLATE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CHOCO VELVETTE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DOUBLE CHOCOLATE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE HALF KG",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "CHOCOLATE CREAM GATEAUX KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BLACK FOREST KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "RED VELVETTE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "RED BERRY GATEAUX HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "TWIN DELIGHT HALK KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "TWIN DELIGHT KG",
    "TO Qty": "1.0000"
  }
]

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table table-striped table-bordered table-hover "
    }),

    $tb = $("<tbody/>"),
    $trh = $("<tr/>");



  $.each(tableValue, function(_, item) {
    $tr = $("<tr/>", {
      "class": "filterData"
    });
    $.each(item, function(key, value) {

      $("<td/>", {
        "class": "text-left"
      }).html(value).appendTo($tr);


      $tr.appendTo($tb);


    });
  });
  $tbl.append($tb);
  $("#DisplayTable").html($tbl);

}
addTable(tableValue)

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

</div>

我只想将我的表分成四列或四个网格，将不胜感激。

编辑

我想给表格增加高度，以便在第一列达到该高度时渲染表格时，下一个项目应该进入新列

最佳答案

您需要将数组拆分为4，然后将其附加到页面

var tableValue = [{
    "Item Name": "CHICKEN BURGER PACKED ",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHICKEN CHETTINAD S/W PACKED ",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "VEG CHESSE SANDWICH PACKED ",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG PUFF",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CHANA CURRY CALZONE",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "MUSHROOM OPEN SUB",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG JALFREZI SUB ROLL",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHEESE AND CORN QUICHE (EGG)",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "MUSHROOM ONION QUICHE (EGG)",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "VEG PINWHEEL PIZZA",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "VEGAN MEAL CUTLET PUFF",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "ALOO MATAR PUFF",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "MASALA OMLETTE SUB ROLL",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PANEER BUTTER CROISSANT",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "CHETTINAD CHICKEN ROLL",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "PUNJABI SAMOSA",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "EGG PUFF ",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "CHICKEN KHEEMA CROISSANT ",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "APPLE PIE MEDIUM",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "DONUT STICK 150 GMS",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "SUGAR DONUT",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CUSTARD  DONUT ",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CINNAMON DANISH",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "CHOCOLATE DONUT",
    "TO Qty": "8.0000"
  },
  {
    "Item Name": "CHOCO DANISH",
    "TO Qty": "3.0000"
  },
  {
    "Item Name": "FUDGE BROWNIE",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "CHOCO VELVETTE CAKE",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "FRESH FRUIT EGGLESS",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "MANGO PASTRY",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "RED VELVET W CHEESE FROSTING",
    "TO Qty": "6.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE  PASTRY",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "DOUBLE CHOCOLATE GOURMET",
    "TO Qty": "10.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PINEAPPLE GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "BLACK FOREST EGGLESS GOURMET",
    "TO Qty": "4.0000"
  },
  {
    "Item Name": "PINEAPPLE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CHOCOLATE CREAM GATEAUX HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BLACK FOREST HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DUTCH TRUFFLE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "MANGO MAGNIFIQUE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DUET SWIRLS HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CARAMEL CHOCOLATE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "CHOCO VELVETTE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DOUBLE CHOCOLATE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE HALF KG",
    "TO Qty": "2.0000"
  },
  {
    "Item Name": "CHOCOLATE CREAM GATEAUX KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BLACK FOREST KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "BUTTERSCOTCH KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "DEATH BY CHOCOLATE KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "RED VELVETTE HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "RED BERRY GATEAUX HALF KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "TWIN DELIGHT HALK KG",
    "TO Qty": "1.0000"
  },
  {
    "Item Name": "TWIN DELIGHT KG",
    "TO Qty": "1.0000"
  }
]

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table table-striped table-bordered table-hover "
    }),

    $tb = $("<tbody/>"),
    $trh = $("<tr/>");


  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      "class": "filterData"
    });
    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);


  }
  addTable(tableValue);

.color1 {
 background:red;
}
.color2 {
background:yellow;
}
.color3 {
background:blue;
}

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

</div>