Блог

Главная - Вопросы по программированию - Таблица, не добавляемая к определенному div «contactsearchtable» в моем html

Таблица, не добавляемая к определенному div «contactsearchtable» в моем html

#javascript #html #javascript-objects

Вопрос:

Я создаю таблицу, и я хотел бы иметь возможность разместить ее в определенном месте элемента div в моем HTML-коде. Я продолжаю получать в строке «Неперехваченная ошибка типа: tableSpot.append не является функцией в XMLHttpRequest.xhr.onreadystatechange»

 tableSpot.appendChild(table);

и я не уверен, что делаю что-то не так. Прокомментированный

 // document.body.appendChild(table);

успешно добавляется в мой документ, но я хочу иметь возможность скрывать или показывать таблицу, поэтому я хочу, чтобы она находилась внутри элемента div.

Я прикрепил часть js, которая настраивает и «создает» таблицу, и часть моего HTML, в которую я хочу ее поместить. — Я не думаю, что это имеет большое значение, но displayChange («div1», «div2») — это просто функция, которая изменяет стиль отображения «div1″ с » нет » на «блок» и наоборот для «div2». Небольшое отклонение, но оно работает только в HTML. Я сталкиваюсь с другой ошибкой, когда пытаюсь вызвать ее из своего кода js. —

 var table = document.createElement('table'),
  thead = document.createElement('thead'),
  tbody = document.createElement('tbody'),
  th,
  tr,
  td;
th = document.createElement('th'),
  th.innerHTML = "id";
table.appendChild(th);
th = document.createElement('th');
th.innerHTML = "First Name";
table.appendChild(th);
th = document.createElement('th');
th.innerHTML = "Last Name";
table.appendChild(th);
th = document.createElement('th');
th.innerHTML = "Phone Number";
table.appendChild(th);
th = document.createElement('th');
th.innerHTML = "Email";
table.appendChild(th);
table.appendChild(thead);
table.appendChild(tbody);

var tableSpot = document.getElementById('contactSearchResult').outerHTML;
tableSpot.appendChild(table);

// document.body.appendChild(table); 
 <div id="searchBox" style="display: none">
  <input type="text" id="searchText" onkeyup="doSearch();displayChange('contactSearchDiv', 'searchBox');" placeholder="Please Type or hit Enter" />
</div>

<div id="contactSearchDiv" style="display: none">
  <span id="contactSearchResult"></span>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  <button type="button" id="editFromSearch" style="display:block" onclick="displayChange('editContactDivForm', 'contactSearchDiv');">
            Edit Contact </button><br/>
  <button type="button" id="deleteFromSearch" style="display:block" onclick="displayChange('deleteDiv', 'contactSearchDiv');">
            Delete Contact </button><br/></br>
  <div id="searchList">
  </div><br /><br/>

Комментарии:

1. это звучит нелогично, ничто не мешает вам отображать таблицу по требованию, вам просто нужно назначить ее или нет css display: none;

2. Исправьте также ошибки вашей консоли

3. Все скрыто, и вы не можете добавить дочернее приложение к строке, возвращаемой таблицей = document.getElementById(‘contactSearchResult’).outerHTML — удалите .outerHTML

4. Я думаю, что я точно не понимаю, где в таблице создается мой html-код? И как мне получить к нему доступ, если я захочу работать с ним позже?

5. tableSpot является строкой ( <element>.outerHTML ), а не элементом! И строка не имеет никакой appendChild функции. Добавьте его к элементу, а не к HTML-строке. Я думаю, все, что тебе нужно сделать, это избавиться от .outerHTML .

Ответ №1:

просто чтобы помочь вам начать лучше …

 const
  btShowHide    = document.getElementById('bt-show-hide')
, contactSearch = document.getElementById('contactSearchDiv')
, myTable       = document.createElement('table')
, myThead       = myTable.createTHead()
, myTbody       = myTable.createTBody()
  ;
let newRow = myThead.insertRow()
newRow.insertCell().textContent = 'id'
newRow.insertCell().textContent = 'First Name'
newRow.insertCell().textContent = 'Last Name'
newRow.insertCell().textContent = 'Phone Number'
newRow.insertCell().textContent = 'Email'

contactSearch.appendChild(myTable)

btShowHide.onclick = evt =>
  {
  contactSearch.classList.toggle('noDisplay')
  } 
 * {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 14px;
  }
.noDisplay {
  display : none;
  }
table  {
  border-collapse : collapse;
  margin          : 1em;
  }
td {
  padding : .2em .8em;
  border  : 1px solid darkblue;
  }
thead { 
  background : lightsteelblue;
} 
 <button id="bt-show-hide">show / hide</button>
<div id="contactSearchDiv" class="noDisplay"> </div>
Метки: ,