尝试使用原版 Javascript 创建动态 table，代码无效

Question

我要构建的内容：

我正在尝试构建一个 Pixel Art Maker，它本质上是一个由用户确定大小的空网格，当您单击它时，网格中每个框的颜色都会发生变化。

问题：

我设法找出颜色变化，但根本无法让 table 出现。

我已经看过这似乎是我能找到的最接近我想要实现的目标的东西。与 tables 有类似的逻辑，但我太缺乏经验，无法理解该代码与我的代码之间的差异。

Codepen:

Codepen link

这是我的代码片段：

const canvas = document.querySelector('#pixelCanvas')

const tbody = document.createElement('tbody');

canvas.addEventListener('click', function(e) {
  e.target.style.background = 'black';
});

canvas.addEventListener('dblclick', function(e) {
  e.target.style.backgroundColor = 'white';
});

// Store the value of columns
const column = document.getElementById('column').value;

// Store the value of rows
const row = document.getElementById('row').value;

// Access forms
const submitForm = document.querySelector('#submitForm');

submitForm.addEventListener('submit', function(e) {
  e.preventDefault(); // Prevents the submit button from refreshing the page by default
  debugger;
  for (r = 0; r < row; r++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (c = 0; c < column; c++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    }
    canvas.appendChild(tbody);
  }



});

<h1>Pixel Art Maker</h1>

<fieldset>
  <legend>Grid Size</legend>

  <form id='submitForm'>

    <label for="height">Columns:</label>
    <input type="number" id="column" placeholder="Key in an integer" step="1" />

    <label for="width">Rows:</label>
    <input type="number" id="row" placeholder="Min: 1, max: 100" min="1" max="100" />

    <div>
      <input type="submit" id="submit" value="Submit" />
    </div>
  </form>
</fieldset>

<br>

<div>
  <table id="pixelCanvas">
    <!--  Dynamic pixel canvas  -->
  </table>
</div>

Answer 1

这是因为你在开始时调用了行数和列数，所以一开始它是NULL，点击提交后得到行数和列数。
检查此 fiddle：https://jsfiddle.net/hdsbvtLw/2/

const canvas = document.querySelector('#pixelCanvas')

const tbody = document.createElement('tbody');

canvas.addEventListener('click', function(e){
  e.target.style.background = 'black';
});

canvas.addEventListener('dblclick', function(e){
  e.target.style.backgroundColor = 'white';
});

// Store the value of columns


// Access forms
const submitForm = document.querySelector('#submitForm');

submitForm.addEventListener('submit', function(e){
  e.preventDefault();  // Prevents the submit button from refreshing the page by default
  tbody.innerHTML='';
  const column = document.getElementById('column').value;

// Store the value of rows
const row = document.getElementById('row').value;
  console.log(row);
  for (r = 0; r < row; r++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (c = 0; c < column; c++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    } 
    canvas.appendChild(tbody);  
  }
  
  
  
});

/**
 * index.scss
 * - Add any styles you want here!
 */
body {
  background: #f5f5f5;
}

table, thead, tbody, tfoot, tr, td {
  border-collapse: collapse;
  border: 3px solid black;
}

td {
  width: 30px;
}

tr {
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Pixel Art</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
  
  <h1>Pixel Art Maker</h1>
  
  <fieldset>
    <legend>Grid Size</legend>
    
    <form id = 'submitForm'>
    
    <label for="height">Columns:</label>
    <input type="number" id="column" 
           placeholder="Key in an integer" step="1" />

    <label for="width">Rows:</label>
    <input type="number" id="row"
           placeholder="Min: 1, max: 100"
           min="1" max="100" />
      
        <div>
            <input type="submit" id="submit" value="Submit" />
      </div>
    </form>
  </fieldset>
  
  <br>
  
  <div>
    <table id="pixelCanvas">
      <!--  Dynamic pixel canvas  -->
    </table>
  </div>
  
  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

尝试使用原版 Javascript 创建动态 table，代码无效

Trying to create a dynamic table with vanilla Javascript, code not working

javascript

forms

for-loop

dynamic-tables