表格重复<tr>无法清除及数据库数据交互功能实现技术求助

嘿，我来帮你搞定这两个问题！先拆解一下你的需求：一是点击「列出数据」时给client表格追加tbody，二是解决重复无法清除的问题。咱们一步步来：

第一步：修正HTML结构的小问题 #

先看你给出的HTML，最后表格的闭合标签写错了，应该是</table>而不是<table>，这会导致DOM结构异常，先修正这个基础问题：

<input type="text" id="name"/>
<input type="text" id="age"/>
<button id="submitBtn">提交</button>
<button id="listBtn">列出数据</button>
<table id='client'>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
</table>

第二步：编写「列出数据」按钮的逻辑 #

核心思路是：每次点击按钮时，先确保表格有tbody，再清空tbody的内容，最后重新渲染数据，这样就能避免重复行的问题，同时正确追加tbody。

以下是完整的JavaScript代码示例：

document.getElementById('listBtn').addEventListener('click', function() {
  const table = document.getElementById('client');
  let tbody = table.querySelector('tbody');

  // 如果表格里没有tbody，就创建一个并添加到表格中
  if (!tbody) {
    tbody = document.createElement('tbody');
    table.appendChild(tbody);
  }

  // 先清空tbody里的所有内容，解决重复行问题
  tbody.innerHTML = '';

  // 这里模拟从数据库获取的数据，你替换成实际的接口/查询结果即可
  const data = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
  ];

  // 遍历数据，创建<tr>并追加到tbody
  data.forEach(item => {
    const row = document.createElement('tr');
    const nameCell = document.createElement('td');
    nameCell.textContent = item.name;
    const ageCell = document.createElement('td');
    ageCell.textContent = item.age;
    row.appendChild(nameCell);
    row.appendChild(ageCell);
    tbody.appendChild(row);
  });
});

关键逻辑说明 #

• 检查并创建tbody：通过querySelector('tbody')判断是否存在tbody，不存在就动态创建，保证表格结构符合标准（HTML表格推荐包含thead、tbody、tfoot）。
• 清空tbody内容：使用tbody.innerHTML = ''可以快速清除所有子元素，避免每次点击都追加新行导致重复。
• 动态渲染数据：遍历数据库返回的数据，逐个创建表格行和单元格，最后追加到tbody中。

这样处理后，每次点击「列出数据」按钮，都会先清空原有行（如果有的话），再重新渲染最新的数据，同时确保表格有正确的tbody结构。

内容的提问来源于stack exchange，提问作者user8713186