简体   繁体   English

在JavaScript中将ADOM创建的Table转换为多维表

[英]Convert A DOM created Table into a multidimensional table in JavaScript

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我正在尝试创建一个表,当你输入一个值时,它会抓取这些数据并在 1-99 之间放置随机数,有些可以是空白的,我在这里用 DOM 创建了它

    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 45 10 “空白” 16

44 53 88 "blank" 44 53 88 “空白”

9 "blank" "blank" "blank" 9“空白”“空白”“空白”

82 63 43 "blank" 82 63 43 “空白”

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注意:我不想先创建数组,以防万一我想更改任何会导致中断的内容

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 )

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)
        }
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM