Почему не получается добавить строку в таблицу?

Question

Zorgios @Zorgios

Почему не получается добавить строку в таблицу?

Есть таблица:

<table border="1" id='testTable'>
    	<caption>Тестовая таблица</caption>
</table>

Пытаюсь добавить в неё строку

var tbody = document.getElementById('testTable').getElementsByTagName("TBODY")[0];
//Первая строка
var row = document.createElement("TR");
tbody.appendChild(row);
var td1 = document.createElement("TD");
var td2 = document.createElement("TH");
var td3 = document.createElement("TH");
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
// Наполняем ячейки
td1.innerHTML = 'Число';
td2.innerHTML = '1000';
td3.innerHTML = '500';

Почему-то получаю ошибку:

TypeError: Cannot read property 'appendChild' of undefined

Ошибка вылетает на строке:
tbody.appendChild(row);

Может быть это потому, что на странице уже есть несколько других таблиц?

Вопрос задан более трёх лет назад
64 просмотра

6 комментариев

Подписаться 1 Простой 6 комментариев

Sand @sand3001

Так у вас в коде таблицы нет элемента tbody

Написано более трёх лет назад
Zorgios @Zorgios Автор вопроса
Sand,
<table border="1" id='testTable'> <caption>Тестовая таблица</caption> <tbody> </tbody> </table>

Как-то так быть должно?
Написано более трёх лет назад
Sand @sand3001

Zorgios, да. Проверьте

Написано более трёх лет назад
Zorgios @Zorgios Автор вопроса

Sand, к сожалению, проблема остаётся.
Для другой таблицы, без тего всё работает.

Написано более трёх лет назад

Sand @sand3001

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<table border="1" id='testTable'>
    <caption>Тестовая таблица</caption>
    <tbody>
    </tbody>
</table>
<script>
var tbody = document.getElementById('testTable').getElementsByTagName("TBODY")[0];
//Первая строка
var row = document.createElement("TR");
tbody.appendChild(row);
var td1 = document.createElement("TD");
var td2 = document.createElement("TH");
var td3 = document.createElement("TH");
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
// Наполняем ячейки
td1.innerHTML = 'Число';
td2.innerHTML = '1000';
td3.innerHTML = '500';
</script>
</body>
</html>

Всё работает, какая проблема?

Написано более трёх лет назад

FeST1VaL @FeST1VaL

Zorgios, проверяйте код. Вы скорее всего косячите где то... ваш код работает если есть tbody тэг

snippet

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 5 часов назад
- 124 просмотра
3

ответа
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 7 часов назад
- 53 просмотра
1

ответ
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 8 часов назад
- 81 просмотр
0

ответов
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 10 часов назад
- 61 просмотр
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 193 просмотра
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 109 просмотров
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

200000 руб./за проект

Так у вас в коде таблицы нет элемента tbody
Sand,
<table border="1" id='testTable'> <caption>Тестовая таблица</caption> <tbody> </tbody> </table>

Как-то так быть должно?
Sand, к сожалению, проблема остаётся.
Для другой таблицы, без тего всё работает.
<!DOCTYPE html> <html> <head> <title>Testing</title> </head> <body> <table border="1" id='testTable'> <caption>Тестовая таблица</caption> <tbody> </tbody> </table> <script> var tbody = document.getElementById('testTable').getElementsByTagName("TBODY")[0]; //Первая строка var row = document.createElement("TR"); tbody.appendChild(row); var td1 = document.createElement("TD"); var td2 = document.createElement("TH"); var td3 = document.createElement("TH"); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); // Наполняем ячейки td1.innerHTML = 'Число'; td2.innerHTML = '1000'; td3.innerHTML = '500'; </script> </body> </html>

Всё работает, какая проблема?
Zorgios, проверяйте код. Вы скорее всего косячите где то... ваш код работает если есть tbody тэг

snippet

Answer 1 · 2020-11-26 12:47:01

0Bannon @0Bannon

Внутри table впиши tbody

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2020-11-26 14:12:31

Нет тэга tbody, поэтому переменной tbody присваивается значение undefined, у которого, разумеется, нет метода appendChild(), к которому вы пытаетесь затем обращаться. Ошибка совершенно четко об этом сообщает.

Почему не получается добавить строку в таблицу?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт