Идея такая, хочу получить доступ к любой ячейке и задавать свойства или значения. Первый вариант работает, но с ним работать, нет смысла.
При запуске второго варианта возникает ошибка, что таблица пустая, и код дальше не работает. Почему? Область видимости или что то другое? Я искал в гугл, но так и не смог найти ответа.
Я пробую через замыкания это сделать, я только начал их учить, практиковать. Код я буду улучшать. Пока мне надо понять в чем проблема. Как должен работать мой код.
- Вызываем функцию, задаем ряд (rows1) где будем брать ячейку.
Получаем таблицу. (Ведь таблица не пустая, но почему ошибка)?
var table = document.getElementById('tableCinema');
- Получаем коллекции.
- Потом через метод получу элемент массива.
Правильно ли я его написал чтоб эти шаги были выполнены? Если есть ошибки, напишите что не так. Спасибо.
<table id="tableCinema" style="border-collapse: collapse;" border="1">
<tr>
<th>Type</th>
<th>Name</th>
<th>Time</th>
</tr>
<tr>
<td>1</td><td >*</td><td >*</td>
</tr>
<tr>
<td>2</td><td >*</td><td >*</td>
</tr>
<tr>
<td >3</td><td >*</td><td >*</td>
</tr>
<tr>
<td>4</td><td >*</td><td >*</td>
</tr>
</table>
<button onclick="addObj()">add</button>
//*****************************************************
var arrMovies = [
{name: "Simpsons", time: "14:20"},
{name: "Zootopia", time: "18:30"},
{name: "Avatar", time: "19:00"},
{name: "Boss", time: "11:40"}
];
function addObj() {
var table = document.getElementById('tableCinema');
var trsTable = table.getElementsByTagName('tr');
var tdsTable = trsTable[2].getElementsByTagName('td');
function addValue(arrElem) {
tdsTable[1].innerHtml = arrMovies[arrElem].name;
tdsTable[2].innerHtml = arrMovies[arrElem].time;
}
tdsTable[1].innerHTML = arrMovies[3].name;
}
//Это второй вариант.
function addObj2(rows1){
var table = document.getElementById('tableCinema');
//Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
//TypeError: table is null
var trsTable = table.getElementsByTagName('tr');
var tdsTable = trsTable[rows1].getElementsByTagName('td');
function addValue (arrElem) {
tdsTable[1].innerHtml = arrMovies[arrElem].name;
tdsTable[2].innerHtml = arrMovies[arrElem].time;
}
console.log(tdsTable[1].innerHTML);
}
var rows2 = addObj2(2);
rows2(1);