在JavaScript中創建動態網格

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 ='pixelCanvas'的控件，創建一個新表，創建一個新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，因此可以在每次迭代時用新對象覆蓋該對象。

希望有幫助！