jQuery $.each 或 $.map 将 <tr> 附加到动态添加的表中答案

【问题标题】：jQuery $.each or $.map to append <tr> to dynamically added tablesjQuery $.each 或 $.map 将 <tr> 附加到动态添加的表中
【发布时间】：2017-11-17 13:36:35
【问题描述】：

我正在使用 jQuery AJAX 响应在面板中动态构建引导表。

我可以用它来创建面板并向面板添加一个表格，但是我在循环 AJAX 响应以创建表格行和单元格时遇到了问题。

$.ajax({
    ...
    ...
    ...
    ...
    success: function(response) {
        $('#groups').append(
            $('<div/>', {'class': 'panel panel-default'}).append(
                $('<div/>', {'class': 'panel-heading'}).append(
                    $('<span/>', {text: 'TEST'})
                )
            ).append(
                $('<div/>', {'class': 'panel-body'}).append(
                    $('<div/>', {class: 'table-responsive'}).append(
                        $('<table/>', {class: 'table table-bordered'}).append(

                        )
                    )   
                )
            )
        );
    }
});

预期的输出是：

<div class="panel panel-default">
    <div class="panel-heading">
         TEST
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

但现在我明白了：

<div class="panel panel-default">
    <div class="panel-heading">
         TEST
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table">

            </table>
        </div>
    </div>
</div>

如何循环访问响应以为每一行创建一个<tr>？

【问题讨论】：

标签： jquery html foreach html-table

【解决方案1】：

试试这个

$('#groups').append(
            $('<div/>', {'class': 'panel panel-default'}).append(
                $('<div/>', {'class': 'panel-heading'}).append(
                    $('<span/>', {text: $('#productgroup option:selected').text() + '/' + $('#productline option:selected').text() + '/' + $('#producttype option:selected').text()})
                )
            ).append(
                $('<div/>', {'class': 'panel-body'}).append(
                    $('<div/>', {class: 'table-responsive'}).append(
                        $('<table/>', {class: 'table table-bordered table-striped'}).append(
                            $.map(response, function (k, v) {
                                return $('<tr/>').append(
                                    $('<td>', {text: 'some text'})
                                ).append(
                                    $('<td>', {text: 'some more text'})
                                );
                            })
                        )
                    )   
                )
            )
        );

【讨论】：