Показать сообщение отдельно
  #1 (permalink)  
Старый 12.06.2018, 22:57
Аватар для oleg_t
Новичок на форуме
Отправить личное сообщение для oleg_t Посмотреть профиль Найти все сообщения от oleg_t
 
Регистрация: 12.06.2018
Сообщений: 6

DOM js создать таблицу на новой странице
добрый день!
требуется при нажатии на кнопку отрыть новую страницу в указанное место (перед кнопкой divBtCheck) вставить таблицу. Т.к. целью является изучение JS, просьба при ответе JQuery не использовать.
Вроде бы всё несложно, но почему-то у меня в результате таблица просто дописывается в конец новой страницы, а не вставляется перед кнопкой. Понятно только одно - где-то я "косячу". Возможно даже, что и везде.

Вот основная страница:
<DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Тестовый сайт</title>
    <script src="./scripts/newtable.js?1.0.1" defer></script>
  </head>           

<body>
  <header>
  <nav>
  </nav>
  </header>

  <section class="main">
      <button class="btNewWin">новое окно</button>
  </section>

  <footer>
  </footer>

</body>

</html>


А вот шаблон, который открывается js-ом:
<html>
  <head>
    <meta charset="UTF-8">
    <title>Open New Window</title>
    <link rel="stylesheet" type="text/css" href="newwin.css?1.0.4">  
  </head>           

<body>
	
  <div class="divText">
    <p class="pText">Текст pText</p>
  </div>

  <div class="divBtCheck">
    <button class="btCheck">Кнопка</button>
  </div>

</body>
</html>


Ну и сам скрипт:
window.onload = function() {
  var newWin = document.querySelector('.btNewWin');
  newWin.onclick = function(event) {
    var d = window.open('./html/newwin.html', 'focus');    
    d.onload = function() {
      var newBody = d.document.querySelector('divBtCheck');      
      var newTable = d.document.createElement('table');
          newTable.classList.add('newTable');
      var newTbody = d.document.createElement('tbody');
      var newDiv = d.document.createElement('div');          
          newDiv.classList.add('tblResult');

      var row = d.document.createElement('tr');    
      for( var i=0; i<6; i++ ) {
        var tdi = d.document.createElement('td');
        tdi.innerHTML = 'res: <br>' + i;
        row.appendChild(tdi);
      };
      newTbody.appendChild(row);    

      var row = d.document.createElement('tr');    
      for( var i=0; i<6; i++ ) {
        var tdi = d.document.createElement('td');
        tdi.innerHTML = 'res: <br>' + i;
        row.appendChild(tdi);
      };
      newTbody.appendChild(row);    
      
      newTbody.appendChild(row);          

      newTable.appendChild(newTbody);        
      newDiv.appendChild(newTable); 
      
      d.document.body.insertBefore(newDiv, newBody);
    }; /* d.window.onload */
  }; /* newWin.onclick */

Последний раз редактировалось oleg_t, 12.06.2018 в 22:59.
Ответить с цитированием