Question

我正在处理动态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>

我只想将我的桌子分成四列或四个网格，任何帮助将不胜感激。

修改

我想给表格增加高度，因此在渲染表格时，当第一列达到该高度时，下一项应该进入新列

Answer 1

您需要将数组拆分为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>

Answer 2

您可以通过结合使用Div和表格来实现。

<div style="width:100%">
    
<div style="width:25%; float:left; background-color: red;" >
    
    <table>

      <tr>
        <td>Dahi</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
      
      </div>
      
<div style="width:25%; float:left; background-color: #05ffb0;" >
    
    <table>

      <tr>
        <td>Dahi</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
</div>

<div style="width:25%; float:left; background-color: rgb(50, 115, 220);" >
    
    <table>

      <tr>
        <td>Dahi</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
</div>

    <div style="width:25%; float:left; background-color: yellow;" >
    
    <table>

      <tr>
        <td>Dahi</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
      
      </div>

</div>

Answer 3

借助 CSS3 和 ul 元素，我们可以执行此操作。我删除了JSON

中键中的空格

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

ul {
	columns: 4;
	-webkit-columns: 4;
	-moz-columns: 4;
}

li:nth-child(odd) {
	background: white;
}

li:nth-child(even) {
	background: gray;
}

ul {
	list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div border='1' id="display"></div>

如何以四列/网格显示HTML表

3 个答案: