javascript - 如何使用 jquery 清空表格的 HTML，然后将其附加到 for 循环中，

Question

我基于 for 循环将行和列附加到表中，但我需要清空现有 HTML，只是为了使我的表可调整大小。我尝试了 ("table").empty();但我无法正确放置该代码。因为它是从 for 循环中添加行和列，如果我应用上面的空代码，它会使表格 HTML 保持为空

这是我编写的附加 html 的以下代码

function draw(width, height){
    for(let i = 0; i < height; i++){
         $("#submit").click(function(){
        $("table").append("<tbody><tr></tr></tbody>");
    });

    }

    for(let j = 0; j < width; j++){
       $("#submit").click(function(){
        $("tr").append("<td></td>");    
      });
    }
}

Answer 1

如果您尝试以编程方式创建一个包含 width 列和 height 行的表格，则可以这样做:

const table = document.getElementById('theTable');
const form = document.getElementById('createTableForm');

function drawTable(height, width) {
  
  table.innerHTML = '';
  let tbody = document.createElement('tbody');
  for (let i = 0; i < height; i++) {
    let row = document.createElement('tr');
    for (let j = 0; j < width; j++) {
      let cell = document.createElement('td');
      cell.textContent = `${i+1}/${j+1}`;
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
  table.appendChild(tbody);
  document.body.appendChild(table);
}

form.addEventListener('submit', function(e) {
  e.preventDefault(); // stop the form submit
  drawTable(tHeight.value, tWidth.value);
});

table,
td {
  border: 1px solid black;
}

td {
  font-size: 8px;
  text-align: center;
  line-height: 20px;
}

<form id="createTableForm">
  <label>Number of rows: <input type="number" value="10" id="tHeight" /></label>
  <br />
  <label>Number of cols: <input type="number" value="10" id="tWidth" /></label>
  <br />
  <button type="submit">Draw table</button>
</form>

<table id="theTable"></table>