Convert A DOM created Table into a multidimensional table in JavaScript

Question

I am trying to create a table, that when you input a value, it will grab this data and put random numbers between 1-99 and some can be blank, I have created it with DOM here

    for (i = 0; i < NumberOfCells / NumberOfCellsInRow; i++) {
        Row = document.createElement("tr")
        Row.setAttribute("id", i + 1 + "tr")
        document.getElementById("table").appendChild(Row)
        AmountOfRows = i + 1;
        }
    for (i = 0; i < NumberOfCells; i++) {
        temporaryVar = randomInt(1,99, 23)
        Cell = document.createElement("td")
        Cell.innerHTML = temporaryVar;
        Cell.setAttribute("id", i + 1 + "td")
        document.getElementById(Math.floor(i/NumberOfCellsInRow+1)
        +"tr").appendChild(Cell)
        }

This works excellently so far, but I want to take this exact table and turn it into a multidimensional array. I have thought of doing

if (i/NumberOfCellsInRow+1 < NumberOfCellsInRow) {
  table.push(new Array(temporaryVar))
}

and I know this is close, but I don't know what else to do

Example: All the numbers will be random but I would have a table that looks like this and I want the array to look like

45 10 "blank" 16

44 53 88 "blank"

9 "blank" "blank" "blank"

82 63 43 "blank"

so then

table = [45, 10, " ", 16],
 [44, 53, 88, " "],
 [9, " ", " ", " "],
 [82, 63, 43, " "]

Notes: I would like to not create the array first just in case there is anything that I want to change that would make that break

What do you mean by multidimensional? A table with 3 rows and 4 columns is one? — testing_22
– testing_22, Commented Mar 10, 2021 at 1:42
I want to create an array that would contain each <tr>'s elements, so this creates a 4*4 table with elements and I want all the elements of the first row to be in an array, so an array like table = [first element, second element, third, fourth] [fifth, sixth, seventh eight] etc — Zain Wilson - WCH Student
– Zain Wilson - WCH Student, Commented Mar 10, 2021 at 1:43
I did state multidimensional, just incase it was gonna be even larger — Zain Wilson - WCH Student
– Zain Wilson - WCH Student, Commented Mar 10, 2021 at 1:46
There that should've explained it a bit better, please tell me if I need to say more. — Zain Wilson - WCH Student
– Zain Wilson - WCH Student, Commented Mar 10, 2021 at 1:58

Mister Jojo · Accepted Answer · 2021-03-10 02:23:19Z

1

just code this way...

const myTable = document.getElementById("table")

for ( let r=0; r < (NumberOfCells / NumberOfCellsInRow); ++r)
  myTable.insertRow().id = `${r+1}tr`

for (c=0; c < NumberOfCells; ++c)
  {
  let Xcell = myTable.rows[(Math.floor(c/NumberOfCellsInRow+1) -1)].insertCell()
  Xcell.id          = `${c+1}td`
  Xcell.textContent = randomInt(1,99, 23)
  }

console.log('AmountOfRow', myTable.rows.length )

answered Mar 10, 2021 at 2:23

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zain Wilson - WCH Student Over a year ago

I didn't know you could use the insertRow() and insertCell() as I am still new to javascript and all the online documentation I could find didn't have that

Zain Wilson - WCH Student · Accepted Answer · 2021-03-10 02:13:30Z

0

So I Figured it out,

I added a few lines that created it

    for (i = 0; i < NumberOfCells / NumberOfCellsInRow; i++) {
        Row = document.createElement("tr")
        Row.setAttribute("id", i + 1 + "tr")
        document.getElementById("table").appendChild(Row)
        AmountOfRows = i + 1;
        table.push(new Array()) //added this line
        }
    for (i = 0; i < NumberOfCells; i++) {
        temporaryVar = randomInt(1,99, 23)
        Cell = document.createElement("td")
        Cell.innerHTML = temporaryVar;
        Cell.setAttribute("id", i + 1 + "td")
        table[Math.floor(i/NumberOfCellsInRow)].push(temporaryVar) //Added this line
        document.getElementById(Math.floor(i/NumberOfCellsInRow+1)
        +"tr").appendChild(Cell)
        }
    }

answered Mar 10, 2021 at 2:13

Zain Wilson - WCH Student

1562 silver badges9 bronze badges

1 Comment

Zain Wilson - WCH Student Over a year ago

I will accept my own answer in a few days

Collectives™ on Stack Overflow

Convert A DOM created Table into a multidimensional table in JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related