Удвоить таблицу в два раза

Рейтинг: 0Ответов: 1Опубликовано: 12.03.2015

Как увеличивать размерность таблицы в два раза на чистом JS? К примеру, есть таблица 3х3, при клике нужно сделать 6Х6 при следующем 9Х9. Вот набросал код, но только строки увеличиваются, а как увеличить столбцы? Также и удаления.

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>Add</button>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2
<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>Add</button>