javascript dynamic table filling-CodePudding

I have multiple arrays lets say:

var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];

I want to put this in 4-column table dynamically. if click on animals picture the animals array would fill the table, if food, then food array would fill the table.

So, lets say I have

<table ></table>

Then need javascript

import $ from "https://cdn.skypack.dev/[email protected]";
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
    
var $table = $('.myTable');
for (var i = 0; i < food.length; i  ){
    var $aSingleContent = '<tr><td>' food[i] '</td></tr>';
    $table.append($aSingleContent);
}

This would display all food items in 1 column. Now I need to divide this by 4 - because 4 columns in a row

CodePudding user response：

because of <tr> in line var $aSingleContent = '<tr><td>' food[i] '</td></tr>'; makes your javascript create a new row for every element in array. we need to keep count the amount of data that had filled a row. if a row has 4 columns columnCount === 4, then we create a new row.

const food = ["apple","banana","pear","melon","grape","peach","pineapple"];
    
const $table = $('.myTable');
let $aSingleContent = "<tr>", columnCount = 0;
for (var i = 0; i < food.length; i  ){
    if(columnCount === 4) {
        columnCount = 0;
        $aSingleContent  = '</tr><tr>';
    }
    $aSingleContent  = '<td>' food[i] '</td>';
    columnCount  ;
}
$aSingleContent  = "</tr>"
$table.append($aSingleContent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  border></table>

CodePudding user response：

You can try this:

window.onload = function() {
    var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
    var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
    var table = document.getElementById("table");
    var i = 0, r = 0;
    while(i < animals.length) {
      var row = table.insertRow(r);
      for (var c = 0; c < 4; c  ) {
        var cell = row.insertCell(c);
        cell.appendChild(document.createTextNode(animals[i] ? animals[i] : ''));
        i  ;
      }
      r  ;
    }
    document.body.appendChild(table);
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" cellpadding="1" cellspacing="1">
</table>

Hope this help!

CodePudding user response：

You can use the % operator in combination with the Math.ceil function to calculate the number of rows in your table and create new table rows accordingly. Here is an example:

import $ from "https://cdn.skypack.dev/[email protected]";

var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];

var $table = $('.myTable');

// Calculate the number of rows needed for the table
var rows = Math.ceil(food.length / 4);

// Create a new table row every 4 items
for (var i = 0; i < food.length; i  ) {
  if (i % 4 == 0) {
    $table.append('<tr></tr>');
  }

  // Append a new table cell to the current row
  var $currentRow = $table.find('tr:last-child');
  $currentRow.append('<td>'   food[i]   '</td>');
}

This will create a table with 4 columns and the necessary number of rows to display all the items in the food array. You can modify this code to switch between the animals and food arrays depending on which one you want to display in the table.

CodePudding user response：

If you have food array more than you provide you can use this one.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>
<body>

<table  border="1">
</table>

<script>
 
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple", "a","b","c","d"];


var $table = $('.myTable');
    
    var $aSingleContent = '';
    var to = 0;
    var from = 3;
    for (var i = 0; i < food.length; i  ){
 
      if (i==to)
      { $aSingleContent  = '<tr>'; }
      $aSingleContent  = '<td>' food[i] '</td>';
      if (i==from)
      { 
        $aSingleContent  = '</tr>'; 
        to = to   4;
        from = from   4;
      }  
    }
    
    $table.append($aSingleContent);
</script>

</body>
</html>