Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Динамическое формирование таблицы

Автор: w03zd8rc 21.11.2014, 06:50

День добрый!
Возникла такая проблема. Есть таблица, под ней кнопка "+". При нажатии на нее добавляю новую строку в конец таблицы. У каждой строки таблицы есть кнопка "-" для удаления этой строки.
Сами функции добавления и удаления:

Код


    function addpole()
    {
        var table = document.getElementById("list");
        var count = table.rows.length-2;
        var row = table.insertRow(count);
        //btn
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "button";
        element1.onclick = function(event){
            delpole(count);
        };
        element1.value = '-';
                cell1.appendChild(element1);
        //num
        var cell2 = row.insertCell(1);
        cell2.innerHTML = count;
        var cell3 = row.insertCell(2);
    }
    function delpole(delnum)
    {
        var table = document.getElementById("list");
        var rowCount = table.rows.length-2;
        for(var i=1; i<rowCount; i++) {
            if (i == delnum)
            {
                document.getElementById("list").deleteRow(i);
                rowCount--;
                i--;
                delnum = -1;
            } else
            {
                table.rows[i].cells[1].innerHTML = i;
                var btm = row.cells[0].childNodes[0];
                btm.onclick = function(event){delpole(i);};
                row.removeChild(row.cells[0].childNodes[0]);
                row.cells[0].appendChild(btm);
            }
        }
    }

Две последние строки - кнопка "+" и служебная строка.
Первый столбец - кнопка удалить, второй - фактический номер строки.
Проблема в удалении строки. В таком варианте, как представлено выше, функции вообще не отрабатывают. Если из ф. убрать строки

Код


                var btm = row.cells[0].childNodes[0];
                btm.onclick = function(event){delpole(i);};
                row.removeChild(row.cells[0].childNodes[0]);
                row.cells[0].appendChild(btm);

то добавление строк работает, при удалении нумерация меняется правильно.
Подскажите, где я что неправильно делаю? Не могу найти ошибки

Автор: w03zd8rc 21.11.2014, 07:18

Однцу ошибку нашел. Глупая конечно, но нехватало строки в ф удаления:

Код


row = table.rows[i];

Теперь осталось както менять onclick событие кнопок при удалении строки.

Автор: _zorn_ 21.11.2014, 08:13

У тебя при вызове onclick, i всегда будет равняться последнему значению из цикла (rowCount-1). Т.е. по факту у тебя удаляется строка rowCount-1, а не та на которой тыкаешь.
Нужно заюзать замыкание. Как то так.

Код


                (function(pole){
                  btm.onclick = function(event){delpole(pole);};
                })(i);

Автор: w03zd8rc 21.11.2014, 08:28

_zorn_, ага спс, помогло. На это я и грешил, только не знал как обойти. Теперь знаю =)

Автор: w03zd8rc 21.11.2014, 09:01

Еще один вопросик в догонку к этой динамической таблице. Есть в этой таблице столбец, где необходимо выбрать дату. Использую js календарь tcal. При начальном формировании таблицы (заношу существующие данные) вношу так этот столбец:

Код


echo "<td><input type='text' size='10' id='birthday_".$count."' name='birthday_".$count."' class='tcal' value='01/01/1990'></td>";

При добавлении новой строки надо мне чтоб этот столбец тоже имел вид календаря. Пытаюсьсоздать так:

Код


        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.size = '10';
        element5.value = '01/01/1990';
        element5.class = "tcal";
        element5.id = "birthday_" + count;
        element5.name = element5.id;
        element5.form = 'listname';
        cell5.appendChild(element5);

но поле получается как обычный input. Как его правильно добавить чтоб тоже получился календарь?

Автор: Aliance 21.11.2014, 09:23

w03zd8rc, у вас явно предоставлены не все данные для помощи по вашему вопросу. соберите полный пример на jsfiddle, там и посмотрим.

Автор: w03zd8rc 21.11.2014, 10:13

Aliance,
http://jsfiddle.net/s1e29jjz/2/

Первая строка, поле дата рождения - так как должно быть. При нажатии на плюс получаем голый инпут, без прикрученного к нему календаря

Автор: w03zd8rc 21.11.2014, 10:32

В мануале на календарь вычитал что инициализировать надо его по новой (упустил, моя вина).
Переделал в такой вариант

Код


            cell5.innerHTML = "<input type='text' size='10' id='birthday_" + pole + "' name='birthday_" + pole + "' class='tcal' value='01.01.1990'>";
            f_tcalInit();

Все работает. Тему крою, спасибо всем ;)