Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/40: Рейтинг темы: голосов - 40, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 03.09.2015
Сообщений: 35

Как создать кнопку удалить в редактируемой динамической таблице JavaScript

30.09.2018, 08:18. Показов 8275. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите, пожалуйста, как правильно создать кнопку удалить, которая должна удаляет последнюю строчку в таблице?

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <meta http-equiv="Content-Type" content="text/html">
    <link rel="stylesheet" href="css/infoTable.css">
    <script src="./js/jquery-3.3.1.min.js"></script> 
    <script src="./js/create-certificate.js"></script>
    <script  src="./js/data.js"></script>
    <title>Тест</title>
</head>
<body>
    <a href="index.html">Назад на главную страницу</a>
    <form>
        <h2>Выберите тип справки</h2>
        <select type="text" class="name-certificate">
            <option value="blood">Тест 1</option>
            <option value="blood2">Тест 2</option>
        </select>
        <h2>Выберите нужное кол-во строк</h2>
        <input type="number" class="rows-certificate">
        <input type="text" name="fix press enter on input " value="Fix IE bug" style=" display:none ">
        <p><input type="button" class="button-create-table" value="Создать таблицу">
    </form>
 
</body>
</html>

JavaScript
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
document.addEventListener('DOMContentLoaded', function () {
        let buttonCreateTable = document.querySelector('.button-create-table');
 
        buttonCreateTable.addEventListener('click', function () {
            let nameCertificate = document.querySelector('.name-certificate');
            let rowsCertificate = document.querySelector('.rows-certificate');
            let row =  rowsCertificate.value;
            // проверяем на правильность введенных данных
            if (row < 1 || row == 0 ) {
                alert('ОШИБКА! Вы должны ввести положительное число.');
                throw "stop";
            }
            let divСertificate = document.createElement('div');
            divСertificate.className = 'div-certificate';
 
            // подготовка формочки для ввода данных
            let tableCertificate = document.createElement('table');
            let nameTable = tableCertificate.createCaption(); // создадим заголовок
            tableCertificate.className = 'table-certificate';
            nameTable.className = 'name-table';
 
 
            
            if (nameCertificate.value == 'blood') {
                nameTable.innerHTML = "<h1>Тест</h1>";
                let elem = document.body.children[1];
                elem.remove();
            } 
            else {
                nameTable.innerHTML = "<h1>Тест 2</h1>";
                let elem = document.body.children[1];
                elem.remove();
            }
            
            // создаем заголовки таблице
            let th = tableCertificate.insertRow(0);
            th.insertCell(0).outerHTML = "<th>1</th>";
            th.insertCell(1).outerHTML = "<th>2</th>";
            th.insertCell(2).outerHTML = "<th>3.</th>";
 
            //создаем саму таблицу
            for (let i = 1; i <= row; i++) {
                let newRow = tableCertificate.insertRow(-1); 
                for (let j = 0; j <= 2; j++) {
                    let newCell = newRow.insertCell(-1)
                        if ( j == 0 ) {
                            let newInput = document.createElement('input');
                            newCell.appendChild(newInput);
                        }
                        if (j == 1) {
                            let newIncrement = document.createElement('input');
                            newIncrement.type = 'number';
                            newCell.appendChild(newIncrement);
                        }
                        if (j == 2) {
                            let newSelect = document.createElement('select');
                            // наполним выпадающий список данными
                            data.forEach(function (item, id) {
                                newSelect.options[id] = new Option(item.title, item.value);
                                (newSelect.options[id].value == 'zero') 
                                    ? newSelect.options[id].disabled = true 
                                    : newSelect.options[id].disabled = false;
                            })
                            newCell.appendChild(newSelect);
                        }
                }
            }
 
            // вызываем создание div и table
            document.body.appendChild(divСertificate);
            divСertificate.appendChild(tableCertificate);
            
 
            // создадим кнопки добавить/удалить строку
            let addButton = document.createElement("input");
            addButton.type = 'button';
            addButton.className = 'add-button';
            addButton.value = 'Добавить строчку';
 
            let delButton = document.createElement("input");
            delButton.type = 'button';
            delButton.className = 'del-button';
            delButton.value = 'Удалить строчку';
 
 
            // вызываем создание кнопки добавить/удалить строку
            tableCertificate.appendChild(addButton);
            tableCertificate.appendChild(delButton);
 
            //создаем прослушку для кнопки добавить
            addButton.addEventListener('click', function () {
                let tbody  = document.querySelector('.table-certificate').getElementsByTagName("TBODY")[0];
                let newInput = document.createElement('input');
                let newIncrement = document.createElement('input');
                newIncrement.type = 'number';
                let newSelect = document.createElement('select');
                // наполним выпадающий список данными
                data.forEach(function (item, id) {
                newSelect.options[id] = new Option(item.title, item.value);
                    (newSelect.options[id].value == 'zero') 
                        ? newSelect.options[id].disabled = true 
                        : newSelect.options[id].disabled = false;
                })
 
                let row = document.createElement("tr");
                let td1 = document.createElement("td");
                let td2 = document.createElement("td");
                let td3 = document.createElement("td");
                
                td1.appendChild(newInput);
                td2.appendChild(newIncrement);
                td3.appendChild(newSelect);
 
                row.appendChild(td1);
                row.appendChild(td2);
                row.appendChild(td3);
 
                tbody.appendChild(row);
            });
            
            //создаем прослушку для кнопки удалить
            delButton.addEventListener('click', function () {
                let tbody  = document.querySelector('.table-certificate').getElementsByTagName("TBODY")[0];
                //let tr = (tableCertificate.rows.length) - 1;
                //alert(tbody);
                // var p=o.parentNode.parentNode;
                //  p.parentNode.removeChild(p);
            });
 
        });
});
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
30.09.2018, 08:18
Ответы с готовыми решениями:

Изменения ширины ячейки в динамической таблице на JavaScript
Всем день добрый! Прошу помочь разобраться с динамической таблицей сформированной на HTML+Javascript. В Javascript волоку не очень. ...

Как создать на Javascript кнопку вызова Excell ?
Подскажите, please, как создать на Javascript кнопку вызова Excell (т.е. нужно получить возможность со странички открыть Excell - вообще-то...

В динамической таблице удалить верхную строку при заполнении нижней
Здравствуйте! Я новичок прошу сильно не ругать (как на форуме так и в программировании). Условие: Есть динамическая ячейка из которой...

1
30.09.2018, 11:31

Не по теме:

Небольшой совет: старайтесь декомпозировать простыню своего кода в логически завершенные методы. Это даст Вам возможность быстрее разбираться в своем коде, а также даст возможность другим не тратить время на его понимание (соответственно выше шанс на получение желаемого Вами ответа)

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
30.09.2018, 11:31
Помогаю со студенческими работами здесь

Создать кнопку на javascript
Подскажите, как создать кнопку на javascript, хтмл кода?

Создать список файлов в таблице со ссылками на сами файлы (javascript + html)
Здравствуйте, уважаемые программисты. Помогите пожалуйста добавить нужные строчки в код, чтобы к полученному списку файлов добавить...

Как оставив кнопку minimize удалить кнопку maximize в Windows Form?
Всем здравствуйте. Устанавливаю: FormBorderStyle = Fixed Single MaximizeBox = False MinimizeBox = True В этом случае MaximizeBox...

Как сделать кнопку удалить и кнопку обновить для БД?
Ребят всем Hello! По-могите плиз решить проблему. Как сделать кнопку удалить и кнопку обновить(есть кнопка сохранить, если я добавляю новую...

Как написать формулу нахождения значения минимума (максимума) в динамической таблице?
Как написать формулу нахождения значения минимума (максимума) в динамической таблице, где последняя строчка общий итог: Ну что то...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru