如何用jQuery/AJAX替换表格指定tr元素（保留表头行）

现有固定结构的HTML表格（结构不可修改）：

<table class="mytable">
   <tbody class="body">
      <tr class="headline1"> ... several td tags with some text ... </tr>
      <tr class="headline2"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="content"> ... several td tags with some text ... </tr>
      <tr class="sum"> ... several td tags with some text ... </tr>
   </tbody>
</table>

需要通过AJAX调用search.php（返回同结构表格数据），仅替换class为content和sum的<tr>元素，保留原表格的headline1和headline2行。原代码会替换整个tbody，不符合需求，修改后的解决方案如下：

修改后的代码 #

$(document).ready(function(){
    const search_field = $('#search_field');

    search_field.keyup(function(){
        $.ajax({
            url: 'http://someurl/search.php?search=' + search_field.val(),
            type: "POST",
            success:function(data){
                // 从返回数据中提取需要替换的目标行
                const $targetRows = $(data).find('.body').find('.content, .sum');
                // 删除原表格中旧的内容行和汇总行
                $('.body').find('.content, .sum').remove();
                // 将新行追加到tbody末尾，保留表头
                $('.body').append($targetRows);
            }
        });
    });
});

优化版（减少DOM查询次数） #

$(document).ready(function(){
    const search_field = $('#search_field');
    const $tbody = $('.body'); // 提前缓存tbody元素，提升性能

    search_field.keyup(function(){
        $.ajax({
            url: 'http://someurl/search.php?search=' + search_field.val(),
            type: "POST",
            success:function(data){
                const $newBody = $(data).find('.body');
                const $targetRows = $newBody.find('.content, .sum');
                // 链式操作：删除旧行后直接追加新行
                $tbody.find('.content, .sum').remove().end().append($targetRows);
            }
        });
    });
});

核心逻辑说明 #

1. 精准提取目标行：不从返回数据中取整个tbody内容，只筛选出.content和.sum行
2. 移除旧行：删除原表格中需要替换的旧行
3. 追加新行：将新获取的目标行添加到tbody中，保留原有的表头行

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