Question

我正在处理一个项目，但由于无法在重置上一个表后生成新表，因此陷入困境。

我想做的是让用户使用按钮重置表，然后在需要时生成另一个表，而无需他重新加载页面。但是，我不确定为什么我的代码只允许我重置表，却无法生成另一个表。

在此方面的任何帮助将不胜感激。

function generate() {

  var myTable = document.getElementById("generatedTable");

  var table = document.createElement('TABLE');
  table.border = '1';

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var rows = document.getElementById("rows").value;
  var cols = document.getElementById("cols").value;

  for (var y = 0; y < rows; y++) {

    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var x = 0; x < cols; x++) {
      var td = document.createElement('TD');

      td.width = 10;
      td.height = 10;

      var cellID = "cell [" + x + ", " + y + "]";
      td.setAttribute("id", cellID.toString());

      td.addEventListener("click", function() {
        cellClicked(this);
      });

      td.appendChild(document.createTextNode("Cell " + x + "," + y));

      tr.appendChild(td);
    }
    myTable.appendChild(table);


  }

  //document.getElementById("button").disabled = true;


}

function cellClicked(cell) {

  //var cell = document.getElementById("this");
  cell.style.backgroundColor = "yellow";


}

function mouseOver(cell) {
  var cell = document.getElementById("td");
  cell.style.backgroundColor = "red";
}

function mouseOut(cell) {
  var cell = document.getElementById("generatedTable");
  cell.style.backgroundColor = "";
}

function removeTable() {
  var removeTab = document.getElementById('generatedTable');
  var parentElement = removeTab.parentElement;
  parentElement.removeChild(removeTab);

}

No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>

<table id="generatedTable" onmouseover="mouseOver()" onmouseout="mouseOut()"></table>

Answer 1

您正在以令人困惑的方式使用id“ generatedTable”，同时用于新生成的表和html文件中已有的表。最后，您将删除包装器表，而不是新生成的包装器表。

如果使用目标元素并在其中添加表，可能更容易理解：

const wrapper = document.getElementById('table-wrapper');

function generate() {
  var table = document.createElement('TABLE');
  table.id = 'generatedTable';
  table.border = '1';

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var rows = document.getElementById("rows").value;
  var cols = document.getElementById("cols").value;

  for (var y = 0; y < rows; y++) {

    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var x = 0; x < cols; x++) {
      var td = document.createElement('TD');

      td.width = 10;
      td.height = 10;

      var cellID = "cell [" + x + ", " + y + "]";
      td.setAttribute("id", cellID.toString());

      td.addEventListener("click", function() {
        cellClicked(this);
      });

      td.appendChild(document.createTextNode("Cell " + x + "," + y));

      tr.appendChild(td);
    }
    wrapper.appendChild(table);
  }

  //document.getElementById("button").disabled = true;


}

function cellClicked(cell) {

  //var cell = document.getElementById("this");
  cell.style.backgroundColor = "yellow";


}

function mouseOver(cell) {
  var cell = document.getElementById("td");
  cell.style.backgroundColor = "red";
}

function mouseOut(cell) {
  var cell = document.getElementById("generatedTable");
  cell.style.backgroundColor = "";
}

function removeTable() {
  var removeTab = document.getElementById('generatedTable');
  wrapper.removeChild(removeTab);

}

No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>

<div id="table-wrapper"></div>

清除表格后无法生成表格

1 个答案: