如何用jQuery/Ajax仅更新表格值 无需重绘表格也不刷新页面

1. 调整服务端返回格式 #

修改getTable.php不再输出完整的<table>结构，改为返回JSON格式的纯数值数据，减少冗余内容传输：

<?php
// 示例数据：二维数组对应表格的行、列数值，可替换为你的业务查询结果
$tableData = [
    ['第一行第一列', '第一行第二列', '第一行第三列'],
    ['第二行第一列', '第二行第二列', '第二行第三列']
];
header('Content-Type: application/json');
echo json_encode($tableData);
?>

2. 固定页面表格结构 #

把表格的框架直接写在前端页面中，不要通过服务端返回，避免整体替换触发重绘：

<div id="tableHolder">
  <table id="dataTable">
    <!-- 固定表头直接写死，不需要动态刷新 -->
    <thead>
      <tr>
        <th>列名1</th>
        <th>列名2</th>
        <th>列名3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 仅表格内容后续动态更新 -->
    </tbody>
  </table>
</div>

3. 改写JS刷新逻辑 #

替换原来的load()方法，改用AJAX获取JSON数据后仅修改有变化的单元格内容，不会触动整个表格结构：

$(document).ready(function(){
  refreshTable();
});

function refreshTable(){
  $.ajax({
    url: 'getTable.php',
    dataType: 'json',
    success: function(resData) {
      const $tbody = $('#dataTable tbody');
      // 逐行更新内容
      resData.forEach((rowVal, rowIdx) => {
        let $curRow = $tbody.find('tr').eq(rowIdx);
        // 行不存在时首次创建，后续不会重复生成
        if (!$curRow.length) {
          $curRow = $('<tr>').appendTo($tbody);
          rowVal.forEach(() => $curRow.append('<td>'));
        }
        // 逐单元格对比数值，仅变化时才修改DOM
        rowVal.forEach((cellVal, colIdx) => {
          const $curCell = $curRow.find('td').eq(colIdx);
          if ($curCell.text() !== cellVal) {
            $curCell.text(cellVal);
          }
        });
      });
      // 若返回行数少于现有行数，删除多余行
      if (resData.length < $tbody.find('tr').length) {
        $tbody.find('tr').slice(resData.length).remove();
      }
    },
    complete: function() {
      // 请求完成后再触发下一次刷新，避免网络延迟导致并发请求
      setTimeout(refreshTable, 10000);
    }
  });
}

额外优化建议 #

• 如果你的表格行数、列数完全固定，可以直接给每个需要更新的添加唯一ID，JS直接通过ID更新对应内容，性能最优
• 对比原load方法，JSON传输体积仅为原HTML返回的1/10不到，刷新速度更快，也不会出现表格闪烁、重排的问题

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