It is possible to create two table with js?

Question

I am trying to create two tables and populate them with two randomized arrays. I don't remember how I got to this point but below is a codepen I have. I want to create a table class="side" and a table class="top" and put the random arrays in them. Please forgive me for the messy codes. I have no experience with coding and just want to make something for my students. Thank you.

edit1: cut the codes a little. I want to make a table with 3 cells in a column and another table with 4 cells in a row and randomly populate them with the two emojis array respectively. Can anyone help me with the JS codes?

UPDATE: Thanks to everyone for your input and advice. With the examples I was able to understand what my codes was lacking. I've posted it below for viewing and have hide the incomplete codes.

const animals = [
  "",
  "‍",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  ""
];

const fruits = [
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  ""
];

function shuffle(a) {
  let j, x, i;
  for (i = a.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    x = a[i];
    a[i] = a[j];
    a[j] = x;
  }
  return a;
}

shuffle(animals);
let t1side = document.getElementsByClassName("tside").item(0);
for (let x = 0; x < 3; x++) {
  let tr = document.createElement("tr");
  for (let y = 0; y < 1; y++) {
    let td = document.createElement("td");
    {
      td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
      td.appendChild(document.createTextNode(animals[x * 1 + y]));
    }
    tr.appendChild(td);
  }
  t1side.appendChild(tr);
}

shuffle(fruits);
let t2top = document.getElementsByClassName("ttop").item(0);
for (let x = 0; x < 1; x++) {
  let tr = document.createElement("tr");
  for (let y = 0; y < 4; y++) {
    let td = document.createElement("td");
    {
      td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
      td.appendChild(document.createTextNode(fruits[x * 1 + y]));
    }
    tr.appendChild(td);
  }
  t2top.appendChild(tr);
}

* {
  padding: 0;
  margin: 0;
}
.top {
  top: 0px;
  left: 200px;
  position: absolute;
}

.side {
  top: 100px;
  left: 0px;
  position: absolute;
}
table.ttop ,table.ttop tr,table.ttop td {
  height: 50px;
  width: 100px;
  padding: 0px;
  marging: 0px;
  background-color: pink;
  font-size: 50px;
  text-align: center;
  border-collapse: collapse;
  border: 0px solid none;
}

table.tside, table.tside tr, table.tside td {
  height: 50px;
  width: 50px;
  padding: 0px;
  marging: 0px;
  background-color: yellow;
  font-size: 80px;
  text-align: center;
  border-collapse: collapse;
  border: 0px solid none;
}

var spaces2 = [
  "",
  "",
  "",
  "",
  "",
  ""
];

var spaces = [
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
];

function shuffle(a) {
  var j, x, i;
  for (i = a.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    x = a[i];
    a[i] = a[j];
    a[j] = x;
  }
  return a;
}

shuffle(spaces2);
var tbody = document.getElementsByTagName("tbody").item(0);
for (var x = 0; x < 3; x++) {
  var tr = document.createElement("tr");
  for (var y = 0; y < 1; y++) {
    var td = document.createElement("td");

    {
      td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
      td.appendChild(document.createTextNode(spaces2[x * 1 + y]));
    }
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}

shuffle(spaces);

var top = document.getElementsByClassName("top").item(0);
for (var x = 0; x < 1; x++) {
  var tr = document.createElement("tr");
  for (var y = 0; y < 4; y++) {
    var td = document.createElement("td");

    {
      td.setAttribute("id", "r" + (x + 1) + "d" + (y + 1));
      td.appendChild(document.createTextNode(spaces[x * 1 + y]));
    }
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}

* {
  padding: 0;
  margin: 0;
}

table.top tbody, tr, td {
  height: 50px;
  width: 50px;
  padding: 0px;
  marging: 0px;
  background-color: none;
  font-size: 40px;
  text-align: center;
  border-collapse: collapse;
  border: 0px solid none;
}

table.side tbody, tr, td {
  height: 50px;
  width: 50px;
  padding: 0px;
  marging: 0px;
  background-color: none;
  font-size: 40px;
  text-align: center;
  border-collapse: collapse;
  border: 0px solid none;
}

user_14773905 · Answer

You want to generate tables from javaScript using an aYrray as content. Here is a small snippet of the generation of a table.

const spaces = [
    "",
    "",
    "",
    "",
    "",
    "", 
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    ""
];


function loadEvents() {
    generateTable(spaces, "container", ["class1", "class2", "class3", "etc"]);
}

function generateTable(dataTable, containerId, classes) {
    shuffle(dataTable);
    let container = document.getElementById(containerId);
    let table = document.createElement("table");

    // Add classes to table
    for (const clazz of classes) {
        table.classList.add(clazz);
    }

    // Calculate cant of rows and columns
    let cantDataRow = 0;
    let cantDataCol = 0;
    do {
        cantDataRow++;
        cantDataCol = Math.ceil(dataTable.length / cantDataRow);
    } while (dataTable.length / Math.pow(cantDataRow, 2) > 1);

    let aux = 0;
    for (let i = 0; i < cantDataRow; i++) { // rows
        let row = document.createElement("tr");
        for (let j = 0; j < cantDataCol; j++) { // columns
            let col = document.createElement("td");
            col.textContent = dataTable[aux++];
            row.appendChild(col); // Add column to row
        }
        table.appendChild(row); // Add row to table
    }
    container.appendChild(table); // Add table to container
}



function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

addEventListener("DOMContentLoaded", loadEvents);

table, tr, td{
    border: 1px solid black;
    border-collapse: collapse;
}




    
    
    
    
    Document

You would only have to call the function passing it the array with the data of the table, the container of the table and the classes that you want it to contain.

It is not necessary to create the shuffle function twice. It is created only once and can be called infinitely many times. I recommend using let instead of var.

user_14807111 · Answer

Nice question :-) You only need one loop for each table. I did it with a for loop. I added a function that outputs a random image.

const t1 = document.querySelector('.top');
const t2 = document.querySelector('.side');

const spaces2 = [
  "",
  "",
  "",
  "",
  "",
  ""
];

const spaces = [
  "",
  "",
  "",
  "",
  "",
  "",
  "",
  "",
];

let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
  let td = document.createElement('td');
  td.innerHTML = getRandomElement(spaces2);
  tr.append(td);
}
t1.append(tr);



// t2
for (let i = 0; i < 4; i++) {
  let tr = document.createElement('tr');  
  let td = document.createElement('td');
  td.innerHTML = getRandomElement(spaces);
  tr.append(td);  
  t2.append(tr);
}


function getRandomElement(items) {
  return items[Math.floor(Math.random()*items.length)];
}

small {
  font-size: 16px;
  padding-left:5px;
}

table {
  
}
table td {
  border: 2px solid #999;  
  padding: 5px;
}

Table 13 cols and 1 row

Table 21 cols with 4 rows

It is possible to create two table with js?

2 Answers