Javascript 使用onclick AJAX调用，使用bootstrap 4创建动态生成的accordion

好的，我想做的有几个部分。我已经得到了返回给我的JSON数据，现在我需要创建一个引导accordion表，其中每一行包含四个“表单元格”或其等价物，但是当我单击该行时，我想在该行的正下方显示accordion中的其余信息。但是，我不太确定如何动态生成一个具有未知行数的多行accordion表，因为这更多的是创建一个带有实际

标记的表。有人帮忙吗？我看到了，但它似乎根本不适合我的需要。这里有一些基本的功能，但它需要能够在文本位于主行的位置使用正确对齐的表行和单元格

我需要能够很好地对齐行和列…这应该看起来像一个表，完成后每一行都有一个下拉面板

$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
        var foNum = this['Factory Order#'];
        var pO = this['PO#'];
        var status = this['Status'];
        var shipDate = this['Ship Date'];
        var dat = '{\"username\":' + "\"" + username + "\"}";        
        $.ajax({
            url: BASE_URL + "portal/getdata/orders/" + foNum,
            method: 'POST',
            cors: true,
            data: dat,
            dataType: "json",
            contentType: "application/json",
            success: function (response) {
                $('.orders').append(
                    '<div class="panel panel-default">'+
                        '<div class="panel-heading" role="tab" id="heading_'+index+'">'+
                        '<tr>'+
                            '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_'+index+'" aria-expanded="true" aria-controls="collapse_'+index+'">'+
                                '<td>' + foNum + '</td><td>' + pO  + '</td><td>' + status + '</td><td>' + shipDate + '</td>' +
                            '</a>'+
                        '</tr>'+
                        '</div>'+
                        '<div id="collapse_'+index+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_'+index+'">'+
                        '<div class="panel-body">'+
                            'blahblah'+ //PUT DETAILS HERE
                        '</div>'+
                        '</div>'+
                    '</div>'
                );
                index+=1;
            },
            error: function (response) {
                alert("Error: Could not get details.");
            }
        });
    });

$（jQuery.parseJSON（JSON.stringify（response））.each（function（））{
var foNum=此['Factory Order#']；
var pO=这个['pO#']；
var状态=此[‘状态’]；
var shipDate=此[“装运日期]；
var dat='{\'username\'：'+'\'+username+'\'}》；
$.ajax({
url:BASE_url+“portal/getdata/orders/”+foNum，
方法：“POST”，
科尔斯：是的，
数据：dat，
数据类型：“json”，
contentType:“应用程序/json”，
成功：功能（响应）{
$（'.orders'）。追加(
''+
''+
''+
''+
''+
''+
''+
''+
'blahblah'+//在此处输入详细信息
''+
''+
''
);
指数+=1；
},
错误：函数（响应）{
警报（“错误：无法获取详细信息。”）；
}
});
});

这不符合问题的要求。这不是一个简单的手风琴。这必须是完全对齐的表格单元格。唉，是的，你只是太懒了，无法使它适应你的需要。看看这个：@AussieJoe那个索引变量到底是从哪里来的？这就是我不懂小提琴的原因。比如…它是在哪里定义的？看看foreach声明。这是第二个参数（输出）。从技术上讲，它是指数输出。看看官方文档，索引是一个可选参数：@AussieJoe另一件事是，这个提琴需要hella修改才能被添加到一个表中，对吗？我需要

元素，这些东西需要排队。我会添加更多代码。。。