таблица по умолчанию — 3х3 (3 строки и 3 столбца). Если пользователь записывает данные на входе 7, таблицу необходимо заменить на таблицу 7×7.

В коде я сначала добавил строки (работает успешно), а затем добавил в каждую строку ячейки / столбцы — но по какой-то причине это не работает.

Спасибо за помощь !

Соответствующий код:

{amp}lt;main{amp}gt; {amp}lt;table{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/main{amp}gt; {amp}lt;input id="tableSizeInput" type="text" placeholder="enter number"{amp}gt; {amp}lt;button id="tableSizeButton"{amp}gt;Set{amp}lt;/button{amp}gt; 
 table { border-collapse: collapse; width: 50vw; height: 70vh; border: 5px solid black; margin: auto; } td { border: 5px solid black; background-color: white; } 
 tableSizeButton.onclick = function () { let counter = 0; while(counter!=parseInt(tableSizeInput.value)) { let row = table.insertRow(0); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); counter  ; } for (let b = 0; b{amp}lt;table.rows.length; b  ) { for(let i = 3; i{amp}lt;parseInt(tableSizeInput.value)-3; i  ) { table.rows[b].insertCell(i); } } в tableSizeButton.onclick = function () { let counter = 0; while(counter!=parseInt(tableSizeInput.value)) { let row = table.insertRow(0); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); counter  ; } for (let b = 0; b{amp}lt;table.rows.length; b  ) { for(let i = 3; i{amp}lt;parseInt(tableSizeInput.value)-3; i  ) { table.rows[b].insertCell(i); } } 

Я искал здесь https://www.w3schools.com/jsref/met_table_insertrow.asp

Я заметил, что 2 вещи отсутствуют:

1 /

 {amp}lt;main{amp}gt; {amp}lt;table id="myTable"{amp}gt; {amp}lt;tr{amp}gt; 

2 /

  let counter = 0; var table = document.getElementById("myTable"); while (counter != parseInt(tableSizeInput.value)) { 

Это должно заставить вас добавлять дополнительные строки

используя этот метод, я имею в виду вставку строк и затем ячейку для этой строки, я не думаю, что вы можете вставить ячейки для уже существующих строк. Таким образом, вы не можете сделать таблицу 3×3 размером 7×7 методом insertRow / Cell, но вы можете сделать таблицу 3×3 размером 3×7 или даже 7×7, НО в этом случае первые 3 строки не будут иметь ячеек. Ps обязательно добавьте CSS с границами td, tr, если вы запускаете этот код

 {amp}lt;body{amp}gt; {amp}lt;table id="tt"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;script{amp}gt; function a() { var v=document.getElementById('i1').value; parseInt(v); var table=document.getElementById('tt'); for (var i = 0; i {amp}lt; v-3; i  ) { var row = table.insertRow(0); for (var l = 0; l {amp}lt; v; l  ) { var cell = row.insertCell(l); } } } {amp}lt;/script{amp}gt; {amp}lt;input id="i1" type="text"{amp}gt; {amp}lt;input id="b1" onclick="a();" type="button"{amp}gt; {amp}lt;/body{amp}gt;