Невозможно создать таблицу после очистки таблицы - PullRequest
Новая
       7

Невозможно создать таблицу после очистки таблицы

0 голосов
/ 19 октября 2019

Я работаю над проектом, но застрял в том факте, что не могу создать новую таблицу после сброса предыдущей таблицы.

То, что я хотел бы сделать, - это позволить пользователю сбросить таблицу с помощью кнопки, а затем сгенерировать еще одну, если это необходимо, без необходимости перезагрузки страницы. Однако я не уверен, почему мои коды позволяют мне только сбросить таблицу, но не могут создать другую таблицу.

Любая помощь по этому вопросу будет принята с благодарностью. 

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>

1 Ответ

0 голосов
/ 19 октября 2019

Вы использовали идентификатор «generateTable» в замешательстве, в то же время для вновь созданной таблицы и для таблицы, которая уже была в вашем 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>
...