javascript dynamic table filling - Jquery

direktor
December 6, 2022
180 views
3 votes
3 Answers

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 class="myTable"></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

Answers

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 class="myTable" border></table>

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!

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 class="myTable" 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>

Please signup or login to give your own answer.

Click here to cancel reply.

javascript dynamic table filling – Jquery

Answers