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

debugcn 发表于 Dev

彼得·格里芬

我正在使用 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>以为每一行创建一个？

广告摇滚

试试这个

$('#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'})
                                );
                            })
                        )
                    )   
                )
            )
        );

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。