DOM создание таблицы js
Всех приветствую. Я новичок, и пытаюсь привязать значение свойства объекта в массиве MOUNTAINS к таблице в html. Подскажите пож-та, почему в данном случае выдает ошубку (Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method ) , а в том, что закомментирован, нет.
<!DOCTYPE html>
<html>
<head>
<title>Exercise one</title>
</head>
<body>
<div id="mountains"></div>
<script type="text/javascript">
const MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];
function mountain(mountains) {
let row = document.createElement("tr"); // row of the table
let header = document.createElement("th"); // zagolovok table
let column = document.createElement("td");// columns of table
divTable = document.getElementById("mountains");
for (let elem of mountains){
divTable = divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));
/*let another = divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));*/
}
mountain(MOUNTAINS);
</script>
</body>
</html>
|
Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div.
|
29 строка
}} 26 строка divTable.appendChild(row.appendChild(document.createTextNode(elem.name))); |
Скобку вставил, ошибка таже.
|
<!DOCTYPE html>
<html>
<head>
<title>Exercise one</title>
</head>
<body>
<div id="mountains"></div>
<script type="text/javascript">
const MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];
function mountain(mountains) {
let row = document.createElement("tr"); // row of the table
let header = document.createElement("th"); // zagolovok table
let column = document.createElement("td");// columns of table
divTable = document.getElementById("mountains");
for (let elem of mountains){
divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));
/*let another = divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));*/
}
}
mountain(MOUNTAINS);
</script>
|
Поймите, я обучаюсь. Мне важно понять суть ошибки а не исправить ее. ЧТо ее так можно было исправить, я знаю. Ошибка заключается в этом :
Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div. |
Цитата:
|
VyacheslavBozere,
вы перезаписываете переменю которая является элементом к которой применяете метод appedChild, и на следующий итерации пытаетесь применить appendChild уже не к элементу, а к той ерунде на которую перезаписали элемент. |
Цитата:
|
VyacheslavBozere,
<!DOCTYPE html>
<html>
<head>
<title>Exercise one</title>
<style type="text/css">
td{
border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background-color:#000;
}
table{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
tr:nth-child(2n + 1) td{
background-color: rgba(230, 230, 230, 1);color:#000;
}
th{
border:1px solid #555555;color:#000;padding:5px;text-align: center;background-color:#FFF; font-size: 1.6em;
}
</style>
</head>
<body>
<div id="mountains"></div>
<script type="text/javascript">
const MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];
function mountain(mountains) {
let row = document.createElement("tr"); // row of the table
let header = document.createElement("th"); // zagolovok table
let column = document.createElement("td");// columns of table
divTable = document.getElementById("mountains");
for (let elem of mountains){
row = divTable.appendChild(row.cloneNode());
if(header){
for (let str in elem){
header = row.appendChild(header.cloneNode());
header.appendChild(document.createTextNode(str));
}
row = divTable.appendChild(row.cloneNode());
header = null;
}
for (let str in elem){
column = row.appendChild(column.cloneNode());
column.appendChild(document.createTextNode(elem[str]));
}
}
}
mountain(MOUNTAINS);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:28. |