VPF::Динамическое формирование таблицы

w03zd8rc

Дата 21.11.2014, 06:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

Код


    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:02

w03zd8rc

Дата 21.11.2014, 07:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

Код


row = table.rows[i];

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

_zorn_

Дата 21.11.2014, 08:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1076
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

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

Код


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

Это сообщение отредактировал(а) _zorn_ - 21.11.2014, 08:14

w03zd8rc

Дата 21.11.2014, 08:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

w03zd8rc

Дата 21.11.2014, 09:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

Еще один вопросик в догонку к этой динамической таблице. Есть в этой таблице столбец, где необходимо выбрать дату. Использую 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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

w03zd8rc

Дата 21.11.2014, 10:13 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

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

w03zd8rc

Дата 21.11.2014, 10:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

Код


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

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »