Question

我试图在javascript中创建动态网格。

一旦我能够创建二维网格，我就会将变量输入到我的函数中，这样他们就可以接受任何数字输入。现在，我只想尝试将网格垂直和水平渲染。

我的第二个功能是只允许我将单元格添加到同一列而不是水平附加它们。如何让新列水平移动？

这是我的代码：

  function makeCell() {
  const canvas = document.getElementById('pixelCanvas')

  const newTable = document.createElement('table')
  const tr = document.createElement('tr')
  const td = document.createElement('td')

  canvas.appendChild(newTable);
  newTable.appendChild(tr);
  tr.appendChild(td);
}

function makeLine() {
 let em = '' 
 for (let i = 0; i < 2; i++) {
    em += makeCell() 
 }
 return em 
}

function makeGrid() {
 let en = ''
 for (let i = 1; i <= 4; i++) {
    en += makeLine()
 }
 return en + '\n'
}

makeGrid();

Answer 1

如果您在心理上仔细阅读了代码，那么您就会在逻辑中看到出错的地方。

MakeGrid触发，你进入第一个for循环，makeLine触发，你进入第二个内部for循环，makeCell触发，在这里你选择id =＆＃39; pixelCanvas＆＃39;的控件，创建一个新表，创建一个新的tr并创建一个新的TD。然后将表附加到画布，将tr附加到表，最后将td附加到tr。

这对于第一个单元格而言非常棒，但是现在你想要第二个单元格...这就是问题所在，makeCell完成了，我们在makeLine中完成了第二轮for循环。然而，它是相同的逻辑，所以它创建了一个新表，但因为id是相同的，所以它不会覆盖任何东西。然后，它创建一个新的tr和一个新的td并追加它们。这就是为什么你最终只有一列，每次迭代都会创建一个新行。

<强>解决方案：

那你怎么解决这个问题？好吧，您现在可能已经意识到，您需要创建一个新行，然后在将该行追加到表中之前遍历要添加到该行的所有单元格。

修改你的代码，这可能是这样的：

function makeCell(tr) {
    // Create new td.
    const td = document.createElement('td');

    // Append td to tr.
    tr.appendChild(td);

    // return tr object with appended td.
    return tr;  
}

function makeLine(newTable) {
    // Create new tr.
    var tr = document.createElement('tr'); 

    // Loop through number of cells.
    for (let i = 0; i < 2; i++) {
        // Overwrite tr object with each new cell added.
        tr = makeCell(tr);    
    }

    // Append new tr to table.
    newTable.appendChild(tr);

    // Return the table with the new tr.
    return newTable;
}

function makeGrid() {
    // Select canvas element.
    const canvas = document.getElementById('pixelCanvas');

    // Create new table.
    var newTable = document.createElement('table');

    // Loop through the rows, note use var so that I can pass the
    // newTable object in to our function and overwrite it each loop.
    for (let i = 1; i <= 4; i++) {
        // Overwrite with each appended tr.
        newTable = makeLine(newTable)
    }

    // Append completed object to canvas.
    canvas.appendChild(newTable);
}

makeGrid();

注意使用var而不是let，因此每次迭代时都可以用新对象覆盖该对象。

希望有所帮助！

在javascript中创建动态网格

1 个答案: