Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2018, 10:43
Аспирант
Отправить личное сообщение для VyacheslavBozere Посмотреть профиль Найти все сообщения от VyacheslavBozere
 
Регистрация: 18.03.2018
Сообщений: 31

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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2018, 10:49
Аспирант
Отправить личное сообщение для VyacheslavBozere Посмотреть профиль Найти все сообщения от VyacheslavBozere
 
Регистрация: 18.03.2018
Сообщений: 31

Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div.
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2018, 10:50
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

29 строка
}}

26 строка
divTable.appendChild(row.appendChild(document.createTextNode(elem.name)));
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2018, 11:00
Аспирант
Отправить личное сообщение для VyacheslavBozere Посмотреть профиль Найти все сообщения от VyacheslavBozere
 
Регистрация: 18.03.2018
Сообщений: 31

Скобку вставил, ошибка таже.
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2018, 11:14
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2018, 11:24
Аспирант
Отправить личное сообщение для VyacheslavBozere Посмотреть профиль Найти все сообщения от VyacheslavBozere
 
Регистрация: 18.03.2018
Сообщений: 31

Поймите, я обучаюсь. Мне важно понять суть ошибки а не исправить ее. ЧТо ее так можно было исправить, я знаю. Ошибка заключается в этом :
Правильно ли я понимаю, что сначала я беру объект div, затем добавляю к нему childNotes в виде таблицы и текста к таблице, а затем пытаюсь этот же объект div перезаписать. В итоге нет изначального объекта div.
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2018, 11:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,323

Сообщение от VyacheslavBozere
затем добавляю к нему childNotes в виде таблицы и текста к таблице
Этого у тебя вообще нет...
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2018, 11:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

VyacheslavBozere,
вы перезаписываете переменю которая является элементом к которой применяете метод appedChild, и на следующий итерации пытаетесь применить appendChild уже не к элементу, а к той ерунде на которую перезаписали элемент.
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2018, 11:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,323

Сообщение от VyacheslavBozere
В итоге нет изначального объекта div
По твоему коду у тебя вообще какая-то каша.
Ответить с цитированием
  #10 (permalink)  
Старый 02.07.2018, 11:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,981

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перевод таблицы Excel в массив JS или объект JS the_little Общие вопросы Javascript 4 16.03.2018 14:14
Динамическое создание таблицы SQL Ambient Общие вопросы Javascript 7 19.07.2016 22:25
Создание элементов под выбранной строкой таблицы Kitana Элементы интерфейса 4 05.09.2011 13:14
создание файлов с помощью js по имени компьютера DIMMon Общие вопросы Javascript 2 28.10.2010 14:42
Добраться до ячеек таблицы через DOM twolf Events/DOM/Window 11 21.01.2009 16:29