Question

如果有人可以提供帮助，请。我连接到数据库。我有这个表，我想 - 当我按下发送按钮 - 将信息发送到我的数据库。这很好用。我按下列表数据＆＃39;按钮我想在表格中添加一个tbody元素。我写了这个fllowing代码：

<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，它每次都会使记录加倍。我推送发送而不是仅添加最后一个。

Answer 1

在jQuery中按标记名选择元素时，您只需使用不带<>的标记名称，因此代替jQuery('<tbody>');它应该是jQuery('tbody');

此外，您可能不想使用remove，因为实际上从DOM中移除了元素。也许这会导致与错误的jQuery-selector结合使用时遇到麻烦。另一种选择是.empty()，它只是删除元素的所有内容，而不是元素本身。然后你也可以省略table.append(tbody)行。

以下是我的猜测：

你实际上没有选择tbody而是其他东西（试验jQuery('<tagname>')为我产生了一些奇怪的结果。然而，remove返回一个jQuery - 包含一个DOM元素的集合（http://api.jquery.com/Types/#jQuery） - 因为你remove，所以哪个元素是真正关注的元素。

然后，您开始使用jQuery将新内容添加到tbody.append(...)对象中的空集合中。最后，您将所有新内容附加到table元素，然后只需将新元素添加到tbody，因为由于选择器错误而从未触及初始tbody。

表中的重复tr，无法清除表元素

1 个答案: