javascript - 如何在 HTML 中添加带有主行和子行的 for 循环行？

Question

我有一些成员数量不同的组，比如

group_1
  -member1
  -member2
  -member3
  -member5
group_2
  -member4
  -member6
  -member6
group_2
  -member7

所以，我想从数据库中获取一个表，另外一些分支有组。当我选择一个分支时，我想获得一个表格，然后作为主行组名称和作为子行成员的详细信息。

我尝试使用 JavaScript for 循环来实现它，但结果是它首先打印所有组，然后打印所有成员，如下所示：

if (number_of_groups != 0) {
    var max_sub_row = 0;
    for (var ig = 1; ig <= number_of_groups; ig++) {
        var head = head_row + 1;
        var markup = '<tr id="group_' + ig + '"><td colspan="20" >Group No: ' + ig + '</td></tr>';
        $("table tbody").append(markup);
        $.ajax({
            url: 'php/getgroupmembers.php',·
            type: 'post',
            data: {
                branch_id: id,
                group_id: ig
            },
            dataType: 'json',
            success: function(res) {
                for (var i = 0; i < res.data.length; i++) {
                    var sub_markup = '<tr id="sub_'+'_'ig'_' + i+ '"><td colspan="10" > ' + res.data[i] + '</td><td colspan="10" > ' + res.data1[i] + '</td></tr>';
                    $("table tbody").append(sub_markup);
                }//sub for
                max_sub_row = res.data.length;
            }
        });
    } //for
} //if number_of_groups
[this is image for result][1]

标签： javascriptjqueryhtml-table