表中tr重复，无法清空表元素
表中tr重复，无法清空表元素
提问于 2018-04-03 08:24:09
如果有人能帮上忙的话。我已连接到数据库。我有这个表，我想要-when，我按下发送按钮--把信息发送到我的数据库。这可以很好地工作。TWhen我按下了'list data‘按钮，我想把一个tbody元素附加到表中。我写了下面的代码：
<input type="text" id="name"/>
<input type="text" id="age"/>
<table id='client'>
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<table>
<input type="button" id="btn" value="send"/>
<input type="button" id="showList" value="list data"/>
...
.... $.get().then(displayClients);
...
function displayClients(response) {
let table = $('#clients');
let tbody = $('<tbody>');
tbody.remove();
for (let data in response) {
let name = response[data]['name'];
let age = response[data]['age'];
let tr = $('<tr>')
.append($('<td>').text(name))
.append($('<td>').text(age))
tbody.append(tr);
}
table.append(tbody);
}问题是，即使我在函数的开头删除了整个tbody，它每次都会使记录加倍。我按下了send，而不是只添加最后一个。
回答 1
Stack Overflow用户
发布于 2018-04-03 08:53:38
在jQuery中通过标记名选择元素时，只需使用不带<>的标记名，因此不应使用jQuery('<tbody>');，而应为jQuery('tbody');
而且，您可能不想使用remove，因为这实际上是从DOM中删除了元素。也许这会在与错误的jQuery选择器结合使用时造成一些麻烦。另一种方法是.empty()，它只删除元素的所有内容，而不是元素本身。然后，您还可以省略行table.append(tbody)。
下面是我的猜测：
实际上，您并没有选择tbody，而是选择了其他东西(对我来说，使用jQuery('<tagname>')的实验产生了一些奇怪的结果。然而，remove返回一个包含DOM元素集合(http://api.jquery.com/Types/#jQuery)的jQuery-Object -哪个元素现在/过去并不是真正值得关注的元素，因为您对它执行了remove操作。
然后使用tbody.append(...)开始向jQuery对象中的空集合添加新内容。最后，将所有新内容附加到table元素，然后该元素只是将新元素添加到tbody中，因为最初的tbody从未因为错误的选择器而被触及。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49625438
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
