Динамическое добавление строк в таблицу HTML
Нужно по кнопке добавлять строки в таблицу с содержимым которое раньше напишу в инпутах То есть должны добавляться строки в вторую таблицу (она пустая, должно быть только Я думаю проблема в скрипте (хотя много раз переписывал его уже), подскажите что не так?
document.getElementById("myBtn").onclick = dodajWiersz; function dodajWiersz()
| Numer porządkowy | Nazwa epizodu |
|---|---|
| 1 | Epizod numer 1 |
| 2 | Epizod numer 2 |
| 3 | Epizod numer 3 |
| 4 | Epizod numer 4 |
| 5 | Epizod numer 5 |
Numer:
Nazwa:
Отслеживать
14.5k 6 6 золотых знаков 33 33 серебряных знака 70 70 бронзовых знаков
задан 20 мар 2021 в 20:23
111 1 1 серебряный знак 8 8 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Метод .getElementById принимает строку.
В коде идет попытка передать ему созданный элемент. Он приводится к строке и ищется элемент с id = [object HTMLTableCellElement]
Для решения достаточно убрать ненужный getElementById и устанавливать свойство .innerHTML напрямую созданному элементу.
document.getElementById("myBtn").onclick = dodajWiersz; function dodajWiersz()
| Numer porządkowy | Nazwa epizodu |
|---|---|
| 1 | Epizod numer 1 |
| 2 | Epizod numer 2 |
| 3 | Epizod numer 3 |
| 4 | Epizod numer 4 |
| 5 | Epizod numer 5 |
Numer:
Nazwa:
Отслеживать
ответ дан 20 мар 2021 в 21:00
80.6k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
Спасибо, понял, теперь все работает!
20 мар 2021 в 21:05
Метод document.getElementById() возвращает ссылку на элемент, который имеет атрибут id с указанным значением.
Из чего следует, что document.createElement(«td») созданный вами элемент не имеет атрибута ID, и что более важно не имеет отношения к DOM элементам на этапе его создания, так как еще не находится на странице, а является переменной JS. Из-за чего и возникала ошибка.
document.getElementById("myBtn").onclick = dodajWiersz; function dodajWiersz()
| Numer porządkowy | Nazwa epizodu |
|---|---|
| 1 | Epizod numer 1 |
| 2 | Epizod numer 2 |
| 3 | Epizod numer 3 |
| 4 | Epizod numer 4 |
| 5 | Epizod numer 5 |
Numer:
Nazwa:
Курсы javascript
Все работает, строки добавляются по нажатию «+», но с одним неприятным деффектом — стираются уже заполненные поля.
Т.е. нажав «+» в данной форме: http://prntscr.com/clqopm
Получу следующее: http://prntscr.com/clqovj
Помогите побороть это недоразумение.
Заранее спасибо.
Последний раз редактировалось visajack, 24.09.2016 в 13:54 .
24.09.2016, 14:53
Регистрация: 14.01.2015
Сообщений: 12,990
Таблицу в span уже плохо. Рег. выражения тут лишнее. Стили из тегов убрать. Не надо ни каких номеров полям, индексы будет проставлены автоматически согласно порядку полей в форме. На jQuery:
#tbl < border-collapse: collapse; >#tbl td < border: 1px solid #ddd; padding: 4px; >#tbl input < width: 50px; >a.delRow, #addRow
Последний раз редактировалось laimas, 24.09.2016 в 14:58 .
24.09.2016, 15:03
Регистрация: 08.07.2016
Сообщений: 1,332
24.09.2016, 15:48
Новичок на форуме
Регистрация: 24.09.2016
Сообщений: 2
laimas, огромное спасибо за код.
В приведенном примере поля input были для примера, в реальности использую так же textarea.
Изменил чутка скрипт:
Всё работает великолепно.
Ещё раз огромное спасибо.
2 warren buffet
Изначальная ЗАДАЧА была в создании динамической формы ибо количество полей неизвестно. Реализацию ЗАДАЧИ нашёл в интернете, но возникли сложности описанные в первом посте.
Потому потребовалась помощь в реализации изменений в готовой реализации изначально поставленной задачи. Что, само по себе, и является задачей. Не?
Как очистить таблицу js
Данный обработчик выбирает таблицу на странице и просто заменяет свойство innerHTML на пустую строку. Итог — таблица схлопнется.
const handler = () => const allTd = document.getElementsByTagName("td"); for (let i = 0; i allTd.length; i += 1) allTd[i].innerHTML = ''; > > HTML: Объединение ячеек внутри строк и столбцов
В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла постоянно дублировать информацию — её можно объединить и написать, что товара нет на складе:
| Товар | Цена | Количество |
|---|---|---|
| Чай | Нет на складе | |
В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan . Их значениями является количество ячеек справа (для colspan ) или снизу (для rowspan ), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan=»2″ , то будет объединена текущая ячейка с соседней.
Разметка для примера выше без учёта объединения ячеек будет следующей:
Товар Цена Количество Чай Нет на складе
Для того чтобы объединить ячейки, нужно сделать два действия:
1. В тег ячейки, которую будем объединять, добавить атрибут colspan со значением, равным количеству объединяемых ячеек справа
2. Удалить лишние ячейки из строки
Товар Цена Количество Чай Нет на складе
Для объединения ячеек по вертикали используется атрибут rowspan . Алгоритм действий повторяет аналогичный при объединении по горизонтали. Единственное отличие — удалять ячейки нужно в соседних строках:
Сотрудник Зарплата Бонусы Менеджер Алексей Примадонин 750$ 63$ Кодовёнок Хекслетович Вениамин Редакторович 1200$ 0
В примере двое сотрудников взаимодействуют с одним менеджером. Можно указать его дважды, но нагляднее объединить ячейки по вертикали. Для этого был добавлен атрибут rowspan=»2″ , а во второй строке удалена четвёртая ячейка, так как её место займёт ячейка выше
| Сотрудник | Зарплата | Бонусы | Менеджер |
|---|---|---|---|
| Алексей Примадонин | 750$ | 63$ | Кодовёнок Хекслетович |
| Вениамин Редакторович | 1200$ | 0 |
Задание
Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.