Как отобразить таблицу HTML в четырех столбцах / сетке - PullRequest
Новая
       17

Как отобразить таблицу HTML в четырех столбцах / сетке

0 голосов
/ 24 мая 2019

Я работаю над таблицей динамического HTML, которую я рендеринг с помощью jquery. В настоящее время я просто показываю таблицу.

Что я пытаюсь сделать

  • Я хочу разбить свою таблицу на четыре столбца или сетку
  • Как это:

This

  • У меня нет идеи или подхода к этому 

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>

Я просто хочу разбить свой стол на четыре колонки или четыре сетки, любая помощь будет оценена.

Редактировать

Я хочу указать высоту таблицы, чтобы при рендеринге таблицы, когда первый столбец касается этой высоты, следующий элемент должен войти в новый столбец

Ответы [ 3 ]

1 голос
/ 24 мая 2019

Вам нужно разделить массив на 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>
0 голосов
/ 24 мая 2019

С помощью элементов 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>
0 голосов
/ 24 мая 2019

Этого можно добиться с помощью комбинации 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...