replicate javascript generated table on other divs with different amount of rows and cells

user_10984630 0
Viewed 27

I have a code that helps me to generate a table of 0's and 1's within a div that serves as container. It works for now, but not sure how to proceed to introduce same code but different amount of cells and rows for each table on different divs across the website (randomNumbers2, randomNumbers3, randomNumbers4, randomNumbers5, etc)

So basically I want to use same code to generate another table with 0's and 1's on the other div randomNumbers3 but instead of 8 rows and 8 cells, to make it 16. Or even to include a certain amount (at same distance) based on the width and height of the div container. to keep it proportional across all the divs that generate tables.

var totalRows = 8;
var cellsInRow = 8;
var min = 0;
var max = 1;


    function drawTable() {
        // get the reference for the body
        var randomNumbers2 = document.querySelector('.randomNumbers2');
 
        // creates a <table> element
        var tbl = document.createElement("table");
        tbl.style.width = '100%';
        tbl.style.height = '100%';
 
        // creating rows
        for (var r = 0; r < totalRows; r++) {
            var row = document.createElement("tr");
         
         // create cells in row
             for (var c = 0; c < cellsInRow; c++) {
                var cell = document.createElement("td");
        getRandom = Math.floor(Math.random() * (max - min + 1)) + min;
                var cellText = document.createTextNode(Math.floor(Math.random() * (max - min + 1)) + min);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }           
            
    tbl.appendChild(row);
        }
    
     randomNumbers2.appendChild(tbl);
}
window.onload=drawTable; 
.randomNumbers2 {
  position: relative;
  width: 180px;
  height: 180px;
  background-color: red;
 }
 
 .randomNumbers3 {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: green;
  float: right;
 }
<div class="randomNumbers2"></div>
<div class="randomNumbers3"></div>

css html jquery javascript
1 Answers

Change drawTable() function to be a helper function and pass parameters to create your table

var min = 0;
var max = 1;

function drawTable(divElement, totalRows, cellsInRow) {
    // get the reference for the body
    var randomNumbers = document.querySelector(divElement);

    // creates a <table> element
    var tbl = document.createElement("table");
    tbl.style.width = '100%';
    tbl.style.height = '100%';

    // creating rows
    for (var r = 0; r < totalRows; r++) {
        var row = document.createElement("tr");

        // create cells in row
        for (var c = 0; c < cellsInRow; c++) {
            var cell = document.createElement("td");
            getRandom = Math.floor(Math.random() * (max - min + 1)) + min;
            var cellText = document.createTextNode(Math.floor(Math.random() * (max - min + 1)) + min);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        tbl.appendChild(row);
    }

    randomNumbers.appendChild(tbl);
}
window.onload = (event) => {
    drawTable(".randomNumbers2", 8, 8);
    drawTable(".randomNumbers3", 16, 16);
};
user_163774570
Related