时间戳

首页 > 解决方案 > 表格未附加到我的 html 中的特定 div 'contactsearchtable'

javascript - 表格未附加到我的 html 中的特定 div 'contactsearchtable'

问题描述

我正在创建一个表格，我希望能够将其放置在我的 HTML 代码中的特定 div 元素位置。我不断收到“Uncaught TypeError: tableSpot.append is not a function at 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/>

标签： javascripthtmljavascript-objects

解决方案

只是为了帮助你有一个更好的开始......

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>

推荐阅读