如何通过jQuery循环遍历并追加服务器返回的表格行

我来帮你调整代码，实现逐个追加元素到目标表格的需求~ 核心思路是先从返回的服务器数据中提取所有行元素，再循环逐个插入到DOM中，具体步骤和代码如下：

基础实现代码 #

// 1. 从返回的data中解析并获取所有<tr>元素
var $rows = $(data).find('tr');

// 2. 获取页面上的目标表格，并清空现有内容
var $targetTable = $('#datatable-responsive');
$targetTable.empty();

// 3. 循环每一行，逐个追加到目标表格中
$rows.each(function(index, rowElement) {
    // 这里可以对当前行做额外处理（比如修改数据、绑定点击事件等）
    // 示例：根据data-price字段调整行样式
    // const price = parseFloat($(rowElement).find('td[data-price]').data('price'));
    // if (price > 10) $(rowElement).css('color', 'orange');
    
    // 将当前行追加到目标表格
    $targetTable.append(rowElement);
});

兼容tbody结构的版本 #

如果你的目标表格要求必须包含<tbody>标签（符合标准表格结构），可以调整代码确保tbody存在后再追加行：

var $rows = $(data).find('tr');
var $targetTable = $('#datatable-responsive');

// 清空表格并初始化tbody结构
$targetTable.empty().append('<tbody></tbody>');
var $targetTbody = $targetTable.find('tbody');

// 逐个追加行到tbody中
$rows.each(function() {
    $targetTbody.append($(this));
});

这种方式相比一次性注入整个HTML的好处是，你可以在循环过程中对每一行进行个性化处理——比如根据data-price、data-itemid等自定义属性修改样式、绑定交互事件，灵活性更高。

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