Динамические таблицы печатают неправильные строки и столбцы в HTML и JQuery

Question

Я пытаюсь динамически сгенерировать таблицу на моем веб-сайте, но она дает мне неправильные строки (ширину) и столбец (высоту)

Для ввода row=1 и column=4 он генерируеттаблицы из 2 строк с 1 строкой из 5 столбцов, а другая с 4 столбцами

$("#sizePicker").submit(function(event) {
  var height = event.currentTarget[0].value,
    width = event.currentTarget[1].value;

  console.log(height + "width" + width);

  for (var i = 0; i < height; i++) {
    console.log(i);
    $('#pixelCanvas').append("<tr>");
    for (j = 0; j < width; j++) {
      console.log(j);
      $('tr').append("<td></td>");
    }
    $('#pixelCanvas').append("</tr>");
  }
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWeight" name="width" min="1" value="1">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>

Answer 1

Я нашел ошибку в вашем скрипте, вот как должна выглядеть функция отправки:

$("#sizePicker").submit(function(event) {
 height = parseInt(event.currentTarget[0].value),
 width = parseInt(event.currentTarget[1].value);

 console.log(height + "width" + width);

 for (var i = 0; i < height; i++) 
 {

  if(height>0)
  {
    let tr = $('<tr></tr>');
    for (j = 0; j < width; j++) 
    {
     tr.append("<td></td>");
    }
    $('#pixelCanvas').append(tr);
  }
 }

 event.preventDefault();
});

Answer 2

В соответствии с вашей логикой td продолжает добавляться внутри каждого tr по мере прохождения цикла.Поэтому вам нужно добавить td к этому tr не ко всем tr внутри table.Вот рабочий пример.

$(function() {
$("#click").on('click', function(event) {
    var height  = $('#inputHeight').val();
    var width = $('#inputWeight').val();
    var html = '';
    for (var i=0;i<height;i++)
    {
        html +='<tr>';
        for (j=0;j<width;j++)
        {
            html+= "<td>"+i + '' + j+"</td>";
        }
    html += ("</tr>");
  }
  $('#pixelCanvas').html(html);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWeight" name="width" min="1" value="1">
        <input id="click" type="button" value="submit">
    </form>
 <table id="pixelCanvas">


    </table>

Answer 3

Проблема в том, что вы добавляете новый td к каждому tr, который существует в таблице, даже к тем, которые были созданы в предыдущих итерациях.

Вы можете исправить это и улучшить логику, создавая массивы, содержащие элементы td и tr на основе экстентов, указанных во входных значениях. Примерно так:

$("#sizePicker").submit(function(e) {
  e.preventDefault();

  var height = parseInt($('#inputHeight').val(), 10);
  var width = parseInt($('#inputWeight').val(), 10);  
  
  var columns = new Array(width).fill('<td></td>').join('');
  var rows = new Array(height).fill(`<tr>${columns}</tr>`);
  
  $('#pixelCanvas').html(rows.join(''));
});

table { 
  margin: 10px;
}
table td {
  padding: 5px 20px;
  border: 1px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sizePicker">
  Grid Height: <input type="number" id="inputHeight" name="height" min="1" value="5"><br />
  Grid Width: <input type="number" id="inputWeight" name="width" min="1" value="5"><br />
  <input id="click" type="submit">
</form>
<table id="pixelCanvas"></table>

Answer 4

Это происходит потому, что вы добавляете td к каждому tr, который находится в table.

Это неправильно

Вотрабочий пример

$("#sizePicker").submit(function(event) {
  var table = $('#pixelCanvas'),
    height = event.currentTarget[0].value,
    width = event.currentTarget[1].value;

  console.log("height: " + height + ", width: " + width);
  
  table.html("");

  for (var i = 0; i < height; i++) {
    table.append("<tr class='row" + i  +"'></tr>");
    
    for (j = 0; j < width; j++) {
      $("tr.row" + i).append("<td>" + i + j + "</td>");
    }
   
  }
  
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="4"> Grid Width:
  <input type="number" id="inputWeight" name="width" min="1" value="5">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>