/var/log/life.log
Блог программиста из солнечной Бурятии

Динамическое удаление и добавление строк и столбцов в таблице

Когда начал писать скрипт для создания создания шаблонов для вышивки, я даже на знал как он будет выглядеть и что делать. Решив всё делать на JavaScript, начал искать как удалить строки из таблицы, и нашёл вполне вменяемый “мануал” http://sudoku.org.ua/rus/blog/2006/03/09/deltablerows1/ . Только там удалялись лишь строки и по id, для меня id были лишними т.к. удалял я строки снизу, и мне также нужно было не только удаление строк, но и удаление столбцов а так же их динамическое добавление. Вот что получилось:
сама таблица

1
2
3
<table  id="canvas">
...
</table>

и две функции
изменение количества строк

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function chWidht(control){
    var value = control.value;
    if(/^[0-9]*$/.test(value)){
        var tbody = document.getElementById('canvas').getElementsByTagName('TBODY')[0];
        var newwidth = parseInt(value);
        var diff = width - newwidth;
        if (diff > 0){
            //удаляем
            for (i = 0; i < height; i++){
                for(j = 0; j < diff ; j++){
                    tbody.rows[i].removeChild(tbody.rows[i].lastChild);
                }
            }
            width = newwidth;
        } else if (diff < 0) {
            //добавляем
            for (i = 0; i < height; i++){
                for(j = diff; j < 0 ; j++){
                    var row = tbody.rows[i];
                    var td = document.createElement("TD");
                    row.appendChild(td);
                }
            }
            width = newwidth;
        } else {}
    } else {
        alert("введите число");
        control.focus();
    }
}

изменение количества столбцов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function chHeight(control){
    var value = control.value;
    if(/^[0-9]*$/.test(value)){
        var tbody = document.getElementById('canvas').getElementsByTagName('TBODY')[0];
        var newheight = parseInt(value);
        var diff = height - newheight;
        if (diff > 0){
            //удаляем
            for(j = 0; j < diff ; j++){
                tbody.removeChild(tbody.lastChild);
            }
            height = newheight;
        } else if (diff < 0) {
            //добавляем
            for (i = diff; i < 0; i++ ){
                var row = document.createElement("TR");
                tbody.appendChild(row);
                for(j = 0; j < width; j++){
                    var td = document.createElement("TD");
                    row.appendChild(td);
                }
            }
            height = newheight;
        } else {}
    } else {
        alert("введите число");
        control.focus();
    }
}

Рабочий пример можно глянуть тут
в JavaScript не силён, поэтому что то может быть и неправильно, но работает)