Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   DOM создание таблицы js (https://javascript.ru/forum/events/74330-dom-sozdanie-tablicy-js.html)

VyacheslavBozere 02.07.2018 10:43

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>

VyacheslavBozere 02.07.2018 10:49

Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div.

j0hnik 02.07.2018 10:50

29 строка
}}

26 строка
divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));

VyacheslavBozere 02.07.2018 11:00

Скобку вставил, ошибка таже.

j0hnik 02.07.2018 11:14

<!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>

VyacheslavBozere 02.07.2018 11:24

Поймите, я обучаюсь. Мне важно понять суть ошибки а не исправить ее. ЧТо ее так можно было исправить, я знаю. Ошибка заключается в этом :
Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div.

ksa 02.07.2018 11:35

Цитата:

Сообщение от VyacheslavBozere
затем добавляю к нему childNotes в виде таблицы и текста к таблице

Этого у тебя вообще нет...

j0hnik 02.07.2018 11:36

VyacheslavBozere,
вы перезаписываете переменю которая является элементом к которой применяете метод appedChild, и на следующий итерации пытаетесь применить appendChild уже не к элементу, а к той ерунде на которую перезаписали элемент.

ksa 02.07.2018 11:38

Цитата:

Сообщение от VyacheslavBozere
В итоге нет изначального объекта div

По твоему коду у тебя вообще какая-то каша.

рони 02.07.2018 11:42

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, время: 17:10.