如何从Ajax页面逐行追加表格行数据至当前页面？当前显示为独立表格

看起来你遇到的核心问题是：Ajax请求返回的是完整的<table>结构，所以每次调用append时，都会在页面新增一个独立表格，而不是把行加到你原有的表格里。下面给你一步步的解决思路：

1. 确保页面已有完整的表格结构 #

先在你的主页面里准备好带表头和tbody的表格，把需要追加行的区域单独用id标记，比如：

<table id="order_table" border="1">
  <thead>
    <tr>
      <th>产品名称</th>
      <th>数量</th>
      <!-- 根据你的需求添加其他表头列 -->
    </tr>
  </thead>
  <!-- 专门用来放动态行的tbody -->
  <tbody id="table_body"></tbody>
</table>

2. 调整Ajax代码，指定追加到tbody #

修改你的Ajax成功回调，把返回的数据追加到tbody里，而不是整个table容器。另外，你的原代码里有重复的$(function()可以简化一下：

$(document).ready(function() {
  $('#filter').click(function() {
    var from_date = $('#mySelect').val();
    var to_date = $('#prd_item').val();
    var qty = $('#prd_qty').val();

    if (from_date !== '' && to_date !== '') {
      $.ajax({
        url: "product_filter.php",
        method: "POST",
        data: { 
          from_date: from_date, 
          to_date: to_date, 
          qty: qty 
        },
        success: function(data) {
          // 把返回的行追加到tbody中
          $('#table_body').append(data);
          // 如果需要每次点击都刷新结果，而不是累加，可以先清空再追加：
          // $('#table_body').empty().append(data);
        }
      });
    }
  });
});

3. 修改处理页面，只输出表格行 #

关键一步！你的product_filter.php现在应该是输出了完整的<table>标签，要改成只输出<tr>格式的表格行，比如PHP代码示例：

// 假设你已经从数据库查询到了产品数据$productList
foreach ($productList as $item) {
    echo "<tr>";
    echo "<td>" . htmlspecialchars($item['product_name']) . "</td>";
    echo "<td>" . htmlspecialchars($item['quantity']) . "</td>";
    // 其他产品信息列
    echo "</tr>";
}

这里用htmlspecialchars是为了防止XSS注入，建议加上。

这样调整后，Ajax返回的就是纯粹的表格行，追加到现有表格的tbody里，就不会出现独立表格的问题啦～

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