Как добавить строку в таблицу js

HTMLTableElement.insertRow()

Метод HTMLTableElement.insertRow() добавляет новую строку в таблицу и возвращает на неё ссылку.

Синтаксис

var row = HTMLTableElement.insertRow(optional index = -1);

• HTMLTableElement — ссылка на HTML table элемент.
• index — индекс новой строки
• row присваивается ссылка на новую строку. Ссылка на HTMLTableRowElement (en-US). Если значение index равно -1 или количеству строк, то строка добавляется как последняя. Если значение index превышает количество строк, выбрасывается исключение IndexSizeError. Если аргумент index пропущен, он равен значению по умолчанию — -1.
• Если таблица содержит несколько элементов tbody , то, по умолчанию, новая строка будет добавлена в последний элемент tbody . Добавить строку в определённый элемент tbody : var specific_tbody=document.getElementById(tbody_id); var row=specific_tbody.insertRow(index)

Пример

table id="TableA"> tr> td>Old top rowtd> tr> table> script type="text/javascript"> function addRow(tableID)  // Get a reference to the table var tableRef = document.getElementById(tableID); // Insert a row in the table at row index 0 var newRow = tableRef.insertRow(0); // Insert a cell in the row at index 0 var newCell = newRow.insertCell(0); // Append a text node to the cell var newText = document.createTextNode("New top row"); newCell.appendChild(newText); > // Call addRow() with the ID of a table addRow("TableA"); script> 

Чтобы быть валидным HTML документом, элемент TR должен содержать хотя бы один TD элемент.

Обратите внимание, что insertRow добавляет строку непосредственно в таблицу и возвращает ссылку на эту строку. Строку не нужно добавлять отдельно, как в случае с методом document.createElement() , для создания нового TR элемента.

Спецификации

Specification
HTML Standard # dom-table-insertrow-dev

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

js как получить строку таблицы

Для получения строки таблицы в JavaScript можно использовать метод querySelector() для поиска конкретной таблицы, после чего использовать метод querySelectorAll() для получения всех строк таблицы.

// получаем таблицу по ID const table = document.querySelector('#myTable'); // получаем все строки таблицы const rows = table.querySelectorAll('tr'); // получаем первую строку таблицы const firstRow = rows[0]; // получаем содержимое ячейки второй колонки первой строки const secondCellContent = firstRow.cells[1].innerHTML; 

В данном примере мы получаем таблицу по ID myTable , затем получаем все строки таблицы и сохраняем их в переменную rows . Далее получаем первую строку таблицы и сохраняем ее в переменную firstRow . Наконец, мы получаем содержимое ячейки второй колонки первой строки и сохраняем его в переменную secondCellContent .

Обратите внимание, что метод querySelectorAll() возвращает коллекцию всех элементов, удовлетворяющих заданному CSS-селектору. Для получения конкретного элемента из коллекции можно использовать индексацию, как в примере выше.

Динамическое добавление строк в таблицу 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: 
D o d a j
 

Отслеживать
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знак
задан 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: 
D o d a j





 

Отслеживать
ответ дан 20 мар 2021 в 21:00
81.1k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
Спасибо, понял, теперь все работает!
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: 
D o d a j
 

Вставка строки в HTML-таблицу. Тег

Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan .

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Контейнер для чего угодно. Тег

Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 октября 2023

Как добавить подпись в HTML. Тег

Устаревший атрибут align — выравнивание подписи относительно элемента .

Тег может использоваться только внутри элемента .

Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

• 6 октября 2023

Метаданные HTML-страницы. Тег

Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

Атрибуты тега :

• charset — кодировка символов в документе.
• name — имя метаданных.
• content — значение метаданных.
• http-equiv — HTTP-заголовок для значения атрибута content .

Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.

• 4 октября 2023

Просто кнопка. Тег

Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега :

• name — имя кнопки.
• type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
• value — значение, которое будет отправлено на сервер при нажатии на кнопку.
• disabled — указывает, что кнопка должна быть отключена.
• form — одна или несколько форм, к которым принадлежит кнопка.
• formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
• formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
• formmethod — метод HTTP, используемый при отправке данных формы.
• formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
• formtarget — указывает, где отображать ответ после отправки формы.

• 4 октября 2023

Независимый контент. Тег

Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

 
Заголовок статьи
 
Текст статьи.





 
 

Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

• 3 октября 2023

Как встроить страницу через

Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования :

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

• 3 октября 2023

Выпадающий список. Тег

Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.

Все опции списка должны быть обёрнуты в тег .

Атрибуты тега :

• autocomplete — подсказка для функции автозаполнения формы;
• disabled — делает элемент неактивным;
• form — связывает список с формой;
• multiple — позволяет выбрать несколько опций;
• name — задает имя элемента, которое будет отправляться на сервер;
• required — делает элемент обязательным для заполнения;
• size — задает количество строк в списке.

• 1 октября 2023

Встроенные CSS-стили для страницы с тегом

Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.

    body 
Добро пожаловать на мой сайт!
   

Атрибуты тега :

• type — MIME-тип таблицы стилей.
• media — типы носителей, для которы будет использоваться стиль.

• 29 сентября 2023

Изображение в HTML. Тег

Элемент используется для вставки изображений на веб-страницы.

У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

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

• 28 сентября 2023