How to increase the dimension of the table twice on pure JS? For example, there is a 3x3 table, with a click you need to make 6X6 with the next 9X9. That sketched code, but only the lines are increasing, but how to increase the columns? Also remove.

function add() { var table = document.getElementById("myTable"); var newRow; var newCell; var newText; for (var i = 0; i < 3; i++){ newRow = table.insertRow(0); for (var j = 0; j < 3; j++) { newText = document.createTextNode('-'); newCell = newRow.insertCell(0); newCell.appendChild(newText); } } } <table id="myTable"> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> </table><br> <button onclick="add()">Add</button>

    1 answer 1

     <script type="text/javascript"> start_num = 3; function add() { start_num += 3; var table = document.getElementById("myTable"); var newRow; var newCell; var newText; for (var i = 0; i < start_num; i++){ newRow = table.insertRow(0); for (var j = 0; j < start_num; j++) { newText = document.createTextNode('-'); newCell = newRow.insertCell(0); newCell.appendChild(newText); } } } </script> <table id="myTable"> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> <tr class="one"> <td>-</td> <td>-</td> <td>-</td> </tr> </table><br> <button onclick="add()">Add</button>